触发器不触发

Question

Okay, So I have looked through all the other questions around trigger not working. I think my question is a bit different from the others I believe.

I have this here listening for clicks on a 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);
});

Notice at the bottom I try to trigger the event stateChanged , in on document ready I run this function...

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);});
            }
    });
}

notice in that function I have...

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

But the function just is never called.

Here's the 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

The signature of your function should take an event as first argument :

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

Answer 2

So this here goes back to this question here: https://superuser.com/questions/527761/javascript-being-cached-in-chrome

Sometime it does it, sometimes it doesn't.

So for anyone that wants to use a input field that depends on a switch.....

PS. Requires jquery and 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>