2013-01-03 258 views
0

好的,所以我查看了觸發器不工作的所有其他問題。我認爲我的問題與我認爲的其他問題有點不同。觸發器沒有觸發

我有這個這裏聽上一個div點擊:底部

$(".switch").click(function(){ 
    var state = ($(this).children('.b1').is('.btn-success') ? 0 : 1); 
    $(this).attr('data-state', state ); 
    $(this).children('.b1').toggleClass('btn-success'); 
    $(this).children('.b0').toggleClass('btn-danger'); 
    $(this).trigger('stateChanged', state); 
}); 

通知我嘗試觸發事件stateChanged,在文件準備好我運行這個功能...

function data_depends(){ 
    var key_name = urlName(); 
    $(document).find('[data-depends]').each(function(index){ 
     var depends = $(this).data("depends").split(", "); 
     if(depends != null) 
      if(depends[1] == "state"){ 
       if($(depends[0]).data("state") == "0") 
        $(this).show(500); 
       else 
        $(this).hide(500); 
       var a = this; 
       $(depends[0]).bind("stateChanged", 
          function(x){if(x) $(a).show(500); 
             else $(a).hide(500);}); 
      } 
    }); 
} 

通知該功能我有...

$(depends[0]).bind("stateChanged", function(x){if(x) $(a).show(500); 
else $(a).hide(500);}); 

但功能只是從來都不是調用。

這裏的HTML

<div class="control-group"> 
    <label class="control-label" for="sale">Outcome</label> 
    <div class="controls"> 
     <div id="sale" class="btn-group switch" data-toggle="buttons-radio" data-state="0" data-persist> 
      <button type="button" class="btn b1">Sale</button> 
      <button type="button" class="btn b0 btn-danger">No Sale</button> 
     </div> 
    </div> 
</div> 
<div class="control-group" data-depends="#sale, state"> 
    <label class="control-label" for="reason">No sale reason</label> 
    <div class="controls"> 
     <input id="reason" type="text" placeholder="No sale reason" data-persist ><br> 
    </div> 
</div> 

回答

0

所以這在這裏可以追溯到這個問題在這裏:https://superuser.com/questions/527761/javascript-being-cached-in-chrome

有時它這樣做,有時沒有。

因此,對於希望使用取決於交換機上的輸入域的人.....

PS。需要jQuery和Bootstrap。


javascript 

$(".switch").click(function(){ 
    var state = ($(this).children('.b1').is('.btn-success') ? 0 : 1); 
    $(this).attr('data-state', state ); 
    $(this).children('.b1').toggleClass('btn-success'); 
    $(this).children('.b0').toggleClass('btn-danger'); 
    $(this).trigger('stateChanged', state); 
    //$("#" + this.id).trigger('stateChanged', state); 
}); 

function data_depends(){ 
    var key_name = urlName(); 
    $(document).find('[data-depends]').each(function(index){ 
     var depends = $(this).data("depends").split(", "); 
     if(depends != null) 
      if(depends[1] == "!state"){ 
       var a = this; 
       $(depends[0]).bind("stateChanged", function(evt, x){if(!x) {$(a).show(500);}else{ $(a).hide(500);}}); 
      }else if(depends[1] == "!state"){ 
       var a = this; 
       $(depends[0]).bind("stateChanged", function(evt, x){if(x) {$(a).show(500);}else{ $(a).hide(500);}}); 
      } 

    }); 
} 

$(document).ready(function(e) { 
    data_depends(); 
    $(".switch").trigger('stateChanged', 0); 
}); 

html 

<div class="control-group"> 
    <label class="control-label" for="sale">Outcome</label> 
    <div class="controls"> 
     <div id="sale" class="btn-group switch" data-toggle="buttons-radio" data-state="0" data-persist> 
      <button type="button" class="btn b1">Sale</button> 
      <button type="button" class="btn b0 btn-danger">No Sale</button> 
     </div> 
    </div> 
</div> 
<div class="control-group" data-depends="#sale, state"> 
    <label class="control-label" for="reason">No sale reason</label> 
    <div class="controls"> 
     <input id="reason" type="text" placeholder="No sale reason" data-persist ><br> 
    </div> 
</div> 
+2

你可以只使用'this.id' ... – Shmiddty

+1

那並不沒有任何意義... $(this).trigger('stateChanged')shoudl工作得很好給有效的HTML(***沒有重複的ID的*** ***) –

+0

我知道。但是一旦我改變了它,它就起作用了。也許鉻是剛剛結束。 – FabianCook

1

你的函數的簽名應採取的事件作爲第一個參數:

$(depends[0]).bind("stateChanged", 
    function(evt, x) { // <-- here add "evt" as first argument 
     if(x) $(a).show(500); 
     else $(a).hide(500); 
}); 
+0

謝謝。在我的回答中使用:) – FabianCook