CODEWITHSUNDEEP
javascriptdomjquery
rnk
rnk

Reputation: 2204

jQuery - triggering multiple events one by one

I'm using jquery tagsInput plugin where I need to dynamically modify the query(deleting the query or entering the new query) without actually typing in the search box connected with tagsInput plugin.

My problem here is I want to trigger backspace event at first then enter event next. Here is the code.

function triggering_events() {
    $(".tag").each(function() {
        var e = jQuery.Event("keydown");
        e.keyCode = 8;
        e.which = 8;
        $("#input-search_tag").trigger(e); //triggering backspace event
    });
    var input = $("#input-search_tag");
    input.val("food");
    input.trigger(e); //triggering enter event
}

But only the backspace event is triggering from the above code. How can I make that enter event work?

Could anyone point out the mistake I've done?

Thanks!

Upvotes: 0

Views: 217

Answers (2)

andres descalzo
andres descalzo

Reputation: 14967

you can try use the methods removeTag and addTag for remove and add tag's:

function triggering_events() {

    var 
        idInput = 'input-search',
        input = $("#" + idInput);

    $("#"+idInput+"_tagsinput .tag").each(function() {
        var tag = $.trim($(this).find('span:eq(0)').text());
        input.removeTag(tag);
    });

    input.addTag("food");
}

run

Upvotes: 1

jbabey
jbabey

Reputation: 46647

There is an issue here:

$("#input-search_tag").val("food").trigger(e); //triggering enter event

.val() returns you a string value of the jquery Element, it is not a chainable method. strings do not have a trigger method.

You could fix this by splitting it into two calls:

var input = $("#input-search_tag");
input.val("food");
input.trigger(e); // triggering enter event

Or using .end():

$("#input-search_tag").val("food").end().trigger(e); //triggering enter event

Edit: putting it all together, along with reusing one event instead of creating multiples:

function triggering_events() {
    var e = jQuery.Event("keydown");

    e.which = 8;
    $(".tag").each(function() {
        $("#input-search_tag").trigger(e); // triggering backspace event
    });

    e.which = 13;
    $("#input-search_tag").val("food").end().trigger(e); // triggering enter event
}

Upvotes: 1

Related Questions