Триггер не стреляет

Question

Итак, я просмотрел все остальные вопросы о неработающем триггере. Я думаю, что мой вопрос немного отличается от других, которым я верю.

У меня есть это здесь, слушая клики на 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>

Answer 1

Так что это здесь восходит к этому вопросу здесь: https://superuser.com/questions/527761/javascript-being-cached-in-chrome

Иногда это делает, иногда нет.

Так что для тех, кто хочет использовать поле ввода, которое зависит от переключателя.....

PS. Требуется jquery и начальная загрузка.

---

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>

Answer 2

Сигнатура вашей функции должна принимать событие в качестве первого аргумента:

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