How to prevent doubletap zoom in iOS and Android

I am building a web app using Jquery Mobile for use on a desktop, iPad and Android phone. I want the user to be able to tap a button to increment (or decrement) a value. My code works fine on a desktop, but on the iPad and Android, when the user taps rapidly, the screen zooms instead of the value incrementing. I have been trying to implement the solution here: Safari iPad : prevent zoom on double-tap (and in particular the refinement provided by Christopher Thomas.

Here is my code for the button and value:

    <div class="content">
        <div id ="status_page" data-role="page">
            <div data-role="content" data-theme="d">
                <div id="val">1</div>
                <div id="but" data-role="button">Click</div>
            </div>
        </div>
    </div>

Here is my event handler for a click on the button (btw - I think the parameters in Christopher's answer were the wrong way round):

        $(".content") .on("click",$("#but"),function(){
            var but_val = parseInt($("#val").text());
            $("#val").text(but_val+1);
        });

...and here is the nodoubletap function:

(function($) {
$.fn.nodoubletapzoom = function() {
    if($("html.touch").length == 0) return;

    $(this).bind('touchstart', function preventZoom(e){
        var t2 = e.timeStamp;
        var t1 = $(this).data('lastTouch') || t2;
        var dt = t2 - t1;
        var fingers = e.originalEvent.touches.length;
        $(this).data('lastTouch', t2);
        if (!dt || dt > 500 || fingers > 1){
            return; // not double-tap
        }
        e.preventDefault(); // double tap - prevent the zoom
        // also synthesize click events we just swallowed up
        $(this).trigger('click');
    });
};
})(jQuery);

This function is trapping the double tap correctly. However, the trigger function at the end is not working (the event is not being fired). If I substitute $(this).trigger('click'); with $('#but').trigger('click'); then everything works as it should. I want this to work for a number of different buttons, so I need to be able to trigger the event based on the object that called the touchstart event. Can anyone help me to fix this please.

ok, so "engeeaitch" the final solution was in the following jsfiddle?

http://jsfiddle.net/GZEM7/18/

and the solution was to replace

$(this).trigger("click"):

with

$(e.target).trigger("click");

and of course, I removed your IOS testing because then it'll work on chrome and android devices :D

thats the final solution? Cool! I'm going to update my code with the new version, I think it'll be better

the final code is:

$.fn.nodoubletapzoom = function() {
    $(this).bind('touchstart', function preventZoom(e){
        var t2 = e.timeStamp;
        var t1 = $(this).data('lastTouch') || t2;
        var dt = t2 - t1;
        var fingers = e.originalEvent.touches.length;
        $(this).data('lastTouch', t2);
        if (!dt || dt > 500 || fingers > 1){
            return; // not double-tap
        }
        e.preventDefault(); // double tap - prevent the zoom
        // also synthesize click events we just swallowed up
        $(e.target).trigger('click');
    });
};
})(jQuery);

$(document).on('pageinit',"#status_page", function(){
        $("body").nodoubletapzoom();
        $(".content").on("click", "#but", function() {
            var curr_val = parseInt($("#val").text());
            $("#val").text(curr_val + 1);
        });
});