2013-01-03 79 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