在动态添加的表内单击事件

Question

我正在向JQuery MObile UK动态添加一个表

表继续这样

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

表然后附加到HTML

后来我尝试绑定像这样的click事件

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

但警报永远不会被触发。

====更新===

这是表动态地附加到字符串中的方式

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>"

我尝试将所有答案中给出的函数放在pagecreate事件中，但仍然没有运气。 为什么这个警报没有被触发？

Answer 1

您所追求的代码是：

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

但这没有意义。 选择器用于id ，id必须是唯一的 ！ 因此，当您添加新的#ClickMe元素时，将其附加到单击回调。

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

阅读文档 （虽然这几段要阅读......）：

如果省略selector或为null，则事件处理程序称为直接或直接绑定。 每次在所选元素上发生事件时都会调用该处理程序，无论它是直接发生在元素上还是来自后代（内部）元素的气泡。

提供选择器时，事件处理程序称为委托。 当事件直接发生在绑定元素上时，不会调用处理程序，但仅适用于与选择器匹配的后代（内部元素）。 jQuery将事件从事件目标起泡到附加处理程序的元素（即最里面到最外层的元素），并为匹配选择器的路径上的任何元素运行处理程序。

事件处理程序仅绑定到当前选定的元素; 它们必须存在于您的代码调用.on（）时的页面上。 要确保元素存在且可以选择，请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。 如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。 或者，使用委托事件来附加事件处理程序，如下所述。

委托事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。 通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序。 例如，此元素可以是模型 - 视图 - 控制器设计中视图的容器元素，如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。 在加载任何其他HTML之前，文档元素在文档的头部可用，因此可以安全地将事件附加到那里而无需等待文档准备就绪。

Answer 2

将您的调用从.bind()更改为.on() - 请在此处检查API参考，因为它需要进行轻微的“签名”更改。

绑定仅适用于当前DOM中的元素（即注入到DOM中的任何内容都不会绑定事件）

Answer 3

这是一个简单的例子，它动态地从DOM获取元素并对其进行一些操作。

$(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这是我在HTML代码中传递方法onclick的元素：

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

我把第一个代码放在匿名函数中：

var SetRangeVal = function(id,val){

};

Everythings对我有用。

Answer 4

您可以使用.on ，绑定动态内容的事件：

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

---

*不要使用.live ，不推荐使用： http ： //api.jquery.com/live/

Answer 5

里面没有文字，因此无法点击。 在那里添加一些内容以便能够点击它。

或者，将id添加到表，tr或td以使其可单击。

此外，您应该使用.live而不是.bind 。

Answer 6

根据api.jquery.com，不推荐使用.live（）方法。 它可能会做的伎俩，但更好地做这样的事情：

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

Answer 7

使用jQuery on()来完成这个：

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

这将适用于动态插入DOM的元素。