Clever Geek Handbook

Click event inside dynamically added table

I am dynamically adding a table to JQuery MObile UK

The table goes like this:

<table><TR><TD><a href="#" id="ClickedMe"></a><TD></TR></table>

Table then added to HTML

Later I will try to bind a click event like this

$('#ClickedMe').bind('click', function(e){
    alert("hello");
});

But the alert never gets triggered.

==== update ===

so dynamically used table to row

cust = cust + "<table id='cusTable'><tr><td scope='row'>" + getLocalizeLbl("phone") + ":</td><td>" + c.PhoneNo + "</td>";
    cust = cust + "</tr><tr><td scope='row'>" +  getLocalizeLbl("fax") + ":</td><td>" + c.Fax + "</td>";
    cust = cust + "</tr><tr><td rowspan='1'></td></tr><tr><td scope='row'>" +  getLocalizeLbl("contact") + ":</td><td><a href='contacts.html' rel='external'>" + dc.Name + "</a></td>";
    sessionStorage.ContactID=dc.ID;
    cust = cust + "</tr><tr><td scope='row'>" +  getLocalizeLbl("email") + ":</td><td>" + dc.Email + "</td>";
    cust = cust + "</tr><tr><td scope='row'>" +  getLocalizeLbl("direct") + ":</td><td>" + dc.Direct + "</td>";
    cust = cust + "</tr><tr><td scope='row'>" +  getLocalizeLbl("mobile") + ":</td><td>"+ dc.Mobile + "</td></tr>";
    cust = cust + "</tr><tr><td scope='row'>" +  'Bill to Cust' + ":</td><td><a href='#' id='ClickedMe'>333343</a></td></tr></table>"

and I am trying to put the function specified in all responses inside the pagecreate event, but still no luck. Why is this warning not firing?

+3


source to share


7 replies


The code you are using is the following:

$('#containerId').on('click', '#ClickMe',function(e){
  alert("hello");
});

But that doesn't make sense. The selector is for id

, and the ID must be unique !. So when you add a new item #ClickMe

, attach it to the callback.



$('#ClickMe').click(function(e){
    alert("hello");
});

Read the docs (although this is a couple of paragraphs to read ...):

If the selector is omitted or zero, the event handler is called direct or direct. The handler is called every time an event occurs on the selected elements, whether it is happening directly to the element or bubbles from a streaming (inner) element.

When a selector is provided, the event handler is said to be delegated. The handler is not called when the event occurs directly on the associated element, but only for descendants (internal elements) that match the selector. jQuery bubbles the event from the target event to the element that has a handler attached (that is, the outermost element) and fires a handler for any elements along that path that matches the selector.

Event handlers are bound only to the currently selected items; They must exist on the page when your code calls .on (). To ensure that the elements are present and selectable, fire an anchor event within the rendered document for elements that are in HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML has been placed on the page. Or, use delegated events to attach an event handler, as described below.

Delegated events have the advantage that they can handle events from descendant elements that will be added to the document later. From selecting an element that is guaranteed to be present during a delegated event handler, you can use delegated events to avoid frequent connection and removal of event handlers. This element can be a view container element in Model-View-Controller, for example, or a document if the event handler wants to monitor all bubble events in the document. the document element is available at the beginning of the document before any other HTML is loaded, so it's safe to attach events there without waiting for the document to be ready.

+2


source


Change your calls from .bind()

to .on()

. Check out the API reference here here as it requires a slight "signature" change.



Binding only works for elements currently in the DOM (i.e. nothing injected into the DOM will be bound to the event)

+1


source


You can use .on

, bind events for dynamic content:

$(document).on("click", "#ClickedMe", function(){ alert("hello"); });

* Don't use .live

, it's deprecated: http://api.jquery.com/live/

0


source


There is no text inside the text, so it cannot be clicked. Add some content in there to be clickable.

Alternatively add id to the table, tr, or td to do this instead.

Also, you should use .live

instead .bind

.

0


source


According to api.jquery.com, the .live () method is deprecated. This will probably help, but it's better to do something like this:

$("#ClickedMe").on("click", function(event){
    alert("hello");
});
0


source


This is a simple example of how to dynamically get an element from the DOM and perform some operation on it.

$(val).on("change", function (e) {
        var valnew = e.currentTarget.value;
        console.log(valnew);
        var name = e.currentTarget.parentNode;
        var name2 = name.nextElementSibling;
        var name3 = name2.childNodes;
        name3[1].innerHTML = valnew;
        console.log(name2);

    });

Object val is the element that I pass to the onclick method inside the HTML code:

<input type="range"  onmousedown="SetRangeVal(@rabat.id_usluga,this)" onma value="0" maxlength="100" step="1" />

The first code I entered into the anonymous function:

var SetRangeVal = function(id,val){

};

Everything works for me.

0


source


Use jQuery on()

to accomplish this:

$(document).on('click', '#ClickedMe', function(e){
  alert("hello");
  e.preventDefault();
});

This will work with elements dynamically inserted into the DOM.

-1


source






More articles:


All Articles