Question

我有网页布局，上面可以包含多个链接。使用AJAX函数动态创建这些链接。它运作正常。

但是，我不知道如何使用那些“动态创建的链接”（即如果我点击它们，如何调用一些JS或jQuery函数）。我猜浏览器无法识别它们，因为页面加载后会创建。

是否有某些功能可以“重新呈现”我的页面和元素？

Tnx在你的帮助下提供帮助！

Answer 1

您可以使用jQuery提供的以下两种方法：

第一个是.live()方法，另一个是.delegate()方法。

第一个的用法非常简单：

$(document).ready(function() {
    $("#dynamicElement").live("click", function() {
        //do something
    });
}

如您所见，第一个参数是您要绑定的事件，第二个参数是处理事件的函数。这种方式的工作方式与“重新渲染”完全不同。执行此操作（$("#dynamicElement").click(...)或$("#dynamicElement").bind("click", ...)）的常用方法是在DOM正确加载（$(document).ready(...)）时将确定事件的事件处理程序附加到DOM元素。现在，显然，这不适用于动态生成的元素，因为它们在DOM首次加载时不存在。

.live（）的工作方式是，不是将通风处理程序附加到DOM元素本身，而是使用document元素附加它，利用JS＆amp; amp;的冒泡特性。 DOM（当您单击动态生成的元素并且未附加事件处理程序时，它会一直查找顶部，直到找到它为止。）

听起来很整洁，对吗？但是这个方法存在一些技术问题，正如我所说，它将事件处理程序附加到DOM的顶部，因此当您单击该元素时，您的浏览器必须遍历整个DOM树，直到它找到正确的事件处理程序。顺便说一句，这个过程非常低效。这里出现了.delegate()方法。

让我们假设以下HTML结构：

<html>
<head>
...
</head>
<body>
    <div id="links-container">
        <!-- Here's where the dynamically generated content will be -->
    </div>
</body>
</html>

因此，使用.delegate（）方法，您可以将事件处理程序绑定到DOM的顶部，而不是将事件处理程序绑定到DOM的顶部。一个DOM元素，你确定它将在DOM树中动态生成的内容的某个地方。越接近它们，这将越好。所以，这应该是魔术：

$(document).ready(function() {
    $("#links-container").delegate("#dynamicElement", "click", function() {
        //do something
    });
}

这是一个很长的答案，但我想解释它背后的理论哈哈。

编辑：你应该更正你的标记，它是无效的，因为：1）锚点不允许使用值属性，2）你不能拥有2个或更多标签相同的ID。试试这个：

<a class="removeLineItem" id="delete-1">Delete</a> 
<a class="removeLineItem" id="delete-2">Delete</a> 
<a class="removeLineItem" id="delete-3">Delete</a>

确定点击了哪一个锚点

$(document).ready(function() {
    $("#links-container").delegate(".removeLineItem", "click", function() {
        var anchorClicked = $(this).attr("id"),
            valueClicked = anchorClicked.split("-")[1];    
    });
}

使用该代码，您将在anchorClicked变量中存储单击链接的id，并在valueClicked中与锚点关联的数字。

Answer 2

在页面初始化代码中，您可以设置如下处理程序：

$(function() {
  $('#myForm input.needsHandler').live('click', function(ev) {
    // .. handle the click event
  });
});

您只需要能够按类或类别识别输入元素。

Answer 3

这些链接是如何动态创建的？您可以使用正确的selector，因为它们使用相同的类名或位于相同的标签中等。

Answer 4

通常，浏览器处理响应HTML并将其添加到DOM树中，但有时，当前定义的事件不起作用，只需在调用ajax请求时初始化事件。

Answer 5

考虑html表格

<form>
  <input type="text" id="id" name="id"/>
  <input type="button" id="check" name="check value="check"/>
</form>

jquery脚本

$('#check).click(function()  {
   if($('#id).val() == '') {
      alert('load the data!!!!);
   }
});

这里单击按钮脚本检查文本框id的值为null。如果它为null它将返回一条警告消息.... 我很瘦，这是你正在寻找的解决方案......

度过美好的一天..

Answer 6

使用动态创建的元素所需要做的就是创建可以找到它们的标识符。在Firebug的控制台或Chrome或IE的开发人员工具中尝试以下代码。

$(".everyonelovesstackoverflow").html('<a id="l1" href="http://www.google.com">google</a> <a id="l2" href="http://www.yahoo.com">yahoo</a>');
$("#l1").click(function(){alert("google");});
$("#l2").click(function(){alert("yahoo");});

您现在应该有两个链接，其中广告通常是动态创建的，并且添加了一个onclick处理程序以显示警报（我没有阻止默认行为，因此它会导致您离开页面。）

jQuery的.live将允许您自动将处理程序添加到新创建的元素。

Answer 7

如果您的链接是通过AJAX进行的，则可以在服务器上设置onclick属性。只需将链接输出到AJAX中就像这样：

<a href="#" onclick="callYourFunctionHere();return false;">Holy crap I'm a link</a>

return false确保链接不会重新加载页面。

希望这有帮助！

如何使用动态创建的字段？

7 个答案: