Question

我正在动态地将表添加到JQuery MObile UK

表继续这样

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

然后表格附加到HTML

稍后我尝试绑定像这样的点击事件

$('#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");
});

阅读docs（虽然有几段要阅读......）：

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

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

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

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

Answer 2

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

Bind仅适用于当前DOM中的元素（即注入到DOM中的任何内容都没有事件限制）

Answer 3

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

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

*请勿使用.live，不推荐使用http://api.jquery.com/live/

Answer 4

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

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

此外，您应该使用.live代替.bind。

Answer 5

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

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

Answer 6

这是一个简单的例子，它动态地从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 7

使用jQuery on()来完成此任务：

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

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

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

7 个答案: