CODEWITHSUNDEEP
javascriptjqueryevent-binding
Richerd fuld
Richerd fuld

Reputation: 384

How to trigger click on dynamically created element

I know we can bind event to dynamically created elements like below

$('some').on('click','class/id of dynamic ele',function(){});

but how to trigger click event on dynamically created element like i have created new element in dom 

<div class="one">M</div>

now how can i $( ".one" ).trigger( "click" ); ?

Upvotes: 3

Views: 36415

Answers (7)

Jai
Jai

Reputation: 74738

i am posting this answer as in all the answers i can't see where to put this trigger method.

If you have any implementations like .append(), .html() of jquery or .innerHTML, .appendChild() of plain js then after execution of it, or i would say whenever you append your element in the DOM, right after it you can use any event to be triggered but some event has to be bound on it.

So, element has to be in the DOM to fire/trigger any event.

Take this example: 

var div = $('<div id="aaa">aaa</div>');
$(document.body).append(div).on('click', '#aaa', divClik);

function divClik(e) {
  alert(this.id+' clicked.');
}
div.trigger('click');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

sharif2008
sharif2008

Reputation: 2798

Did you ever try with delegate? if not you try like this for your dynamically added content. 

$('body').delegate("div.one", "click", function(e){
   // do you other works here
});

check this here

Hope your problem is solved. :)

Upvotes: 3

Mayank
Mayank

Reputation: 1392

As no FIDDLE provided, I have assumed the following markup

<a class="some">Click To Add</a>
<br/>
<div class="container">
</div>

css class

.one
{
    background-color: Grey;
}
.some
{
     background-color: Red;
}

Assigning click event after the control added to the DIV(with container class)

$(document).ready(function(){
    $('.some').click(function(){
        $('.container').append("<div class='one'>M</div><br/>");
        $('.container div').off('click').on('click',function(){
                alert("Clicked");
        });
    });
});

Try The FIDDLE, and share your inputs if any.

Hope this helps ............

Upvotes: 1

guest271314
guest271314

Reputation: 1

but how to trigger click event on dynamically created element like i have created new element in dom

Try defining <div class="one">M</div> without attributes <div">M</div>; setting attributes at second argument to jQuery( html, attributes ) , utilizing .click()

jQuery( html, attributes )

html

Type: htmlString A string defining a single, standalone, HTML element (e.g. or ).

attributes

Type: PlainObject An object of attributes, events, and methods to call on the newly-created element.

Important: If the second argument is passed, the HTML string in the first argument must represent a simple element with no attributes. As of jQuery 1.4, any event type can be passed in, and the following jQuery methods can be called: val, css, html, text, data, width, height, or offset.

// create dynamic element
$( "<div></div>", {
  "class": "one",
  "text": "abc",
  "on": {
    // attach `click` event to dynamically created element
    "click": function( event ) {
      // Do something
      console.log(event.target, this.textContent)
    }
  }
}).appendTo( "body" )
// trigger `click` event on dynamically created element
.click()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

Upvotes: 5

Tahir Ahmed
Tahir Ahmed

Reputation: 5737

Yup. .trigger() should do:

Snippet:

var myDIV = $('<div id="myDIV">&nbsp;</div>');
$(document.body).append(myDIV);
$(document).on('click', '#myDIV', onClick);
function onClick() {
  alert('hello');
}
myDIV.trigger('click');
div {
  background-color: #cc0;
  width: 100px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

But then again, if this is something you want to do when the document is ready or when the window has loaded, then you probably don't need to .trigger(), you can call the function directly.

Upvotes: 3

Brownman Revival
Brownman Revival

Reputation: 3850

$(document).on('click', '.one', function() {

use this one to put click on dynamically created element

find the DOCUMENTATION for more info

Upvotes: 8

K K
K K

Reputation: 18099

Store that element in a variable, use the same to append dynamically in the body and then trigger click on it:

var div = "<div class='one'>M</div>";
$("body").append($(div));
//Your code//
$(div).trigger("click");

Or if there are multiple elements with same class and this is the last element then:

$(".one:last").trigger("click");

Upvotes: 2

Related Questions