onchange javascript click event cancels the other one out

Question

Here is the essencial part of my custom code. I believe the onchange function is in confict with the function with the 3rd party plugin im using which also targets the same "option" tag.

    jQuery(document).ready(function(e) {
            var t = e("#filter-container");
            t.imagesLoaded(function() {
                t.isotope({
                    itemSelector: "figure",
                    filter: "*",
                    resizable: false,
                    animationEngine: "jquery"
                })
            });
$("select").on("change", function() {
    var select = $(this);
    var selectedOption = select.find("option:selected");
    var r = selectedOption.attr("data-filter");
    t.isotope({
      filter: r
    });
    return false
});
            e(window).resize(function() {
                var n = e(window).width();
                t.isotope("reLayout")
            }).trigger("resize")
        })

and here the probable culprit from the dropdown plugin im using. It is much longer than that but here the function that worries me which probably blocks my script:

    $("select").on("change", function() {
        var select = $(this);
        var selectedOption = select.find("option:selected");
        var n = select.parents(".filter-buttons");
        var r = selectedOption.attr("data-filter");
        t.isotope({
          filter: r
        });
        return false
    });

both function are part of seperate scripts so I cant join them together. Is there any way to make the second function not cancel the first one out?

http://jsfiddle.net/snz0gkkk/10/

@Sameer Shemna I have added a Jsfiddle. To be honest the project is pretty complex so it is hard to to this in jsfiddle. Im more used to notepad++ and dreamweaver — Steve, Oct 10 '14 at 18:55
@DroidChris you can have a look at my JSfiddle. The only thing related would columnizer-setup which is my script hosted on my site and dropdown,js under extended resources. The rest is not revevant to the problem — Steve, Oct 10 '14 at 18:57
why you've added return false. I think that might be the problem. and also refer http://stackoverflow.com/questions/1491718/jquery-more-than-one-handler-for-same-event — Gangadhar Jannu, Oct 10 '14 at 20:26
@Steve why have you added your javascript as an external resource, it must be pasted in the javascript frame in jsfiddle — Sameer Shemna, Oct 11 '14 at 04:59

score 0 · Answer 1 · answered Oct 10 '14 at 19:42

I tried to use your fiddle, but it didn't seem to work.

Try adding a unique namespace to your change event.

$("select").on("change.optionChange", function() {
    var select = $(this);
    var selectedOption = select.find("option:selected");
    var r = selectedOption.attr("data-filter");
    t.isotope({
      filter: r
    });
    return false
});

onchange javascript click event cancels the other one out

1 Answers1