2012-03-24 8 views
0

Warum Skript in jquery mobilen zusammenklappbaren Feuer zweimal, danke im fortgeschrittenen.Skript in jquery mobilen zusammenklappbaren Feuer zweimal

Update: Der Code zeigt, dass beim Klicken auf "btnonce" nur 1 Warnung, aber "btnwice" 2 Warnung, nur anders ist "btnwice" Javascript unter "div data-role =" reduzierbar ", warum es zweimal feuert?

<div data-role="page" id="page"> 
    <div data-role="content"> 
<script type="text/javascript"> 
    $('#page').live('pageinit', function (event) { 
    $("#btnonce").click(function() { 
    alert("Handler for .click() called."); 
    }); 
}) 
</script> 
<div data-role="collapsible" data-collapsed="false" id="one"> 
<script type="text/javascript"> 
    $('#page').live('pageinit', function (event) { 
     $("#btntwice").click(function() { 
     alert("Handler for .click() called."); 
    }); 
    }) 
</script> 
<h3>Test</h3> 
<input type="button" id="btntwice" data-icon="check" value="fire twice" ></input> 
<input type="button" id="btnonce" data-icon="check" value="fire once" ></input> 
</div> 
</div> 
</div> 

http://jsfiddle.net/M8PM2/39/

Antwort

0

ändern JavaScript dies:

$('#page').live('pageinit', function (event) { 
    $("#btnonce").click(function() { 
     alert("Handler for .click() called."); 
    }); 
    $("#btntwice").click(function() { 
     alert("Handler for .click() called."); 
    }); 
}) 

Working example here

Ihre click Handler hinzugefügt zweimal wurde - see this example

+0

danke ManseUK, aber genau wie Ihr "siehe dieses Beispiel", warum es zweimal hinzugefügt wurde (alert ('Called');)? – tuanzhang

0

Sieht aus wie ein Problem mit der Art und Weise der JQM zusammenklappbar _create Funktion jQuery wrapInner() verwendet. Es gibt einen bekannten jQuery-Bug (oder ist es ein Feature?), Bei dem Skript-Tags in Inhalten, die umgebrochen werden sollen, von der domManip-Logik erneut ausgeführt werden. Gute Zeiten.

Wenn Sie das Skript aus dem reduzierbaren verschieben können, wäre das ideal. Vielleicht haben Sie könnten JQM Hack nicht wrapInner für diese bestimmte Codezeile zu verwenden:

collapsibleContent = collapsible.wrapInner("<div class='ui-collapsible-content'></div>").children(".ui-collapsible-content"), 

Ich persönlich bin mit einer alten Schule gehen, gehen „wenn (alreadyRan) return; alreadyRan = true;“ - Typ-Flag . Macht mich nostalgisch für FORTRAN.

aktualisieren

So landete ich mit den folgenden in meinem JQM Setup-Skript steigen (auf jeder Seite und "sub" Seite ausgeführt werden):

$(document).on({ 
    pagecreate: function (e) { 
     $(':jqmData(role=collapsible) script').remove(); 
    } 
}, ':jqmData(role=page)'); 

harmlos genug zu sein scheint. Ich kann meinem Skript immer eine Klasse hinzufügen und den Selektor ändern, wenn ich aus irgendeinem Grund inline 0 Skripte zweimal hintereinander ausführen möchte. Etwas wie:

$(':jqmData(role=collapsible) script:not(.do-not-remove)').remove();