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

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正确加载时，事件到DOM元素（ $(document).ready(...) ）。 现在，显然，这不适用于动态生成的元素，因为它们在DOM首次加载时不存在。

.live（）的工作方式是，不是将document处理程序附加到DOM元素本身，而是将其与document元素相连，利用JS和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

这些链接是如何动态创建的？ 您可以使用正确的选择器，因为它们使用相同的类名或驻留在相同的标签中等。

Answer 4

Noramlly，浏览器进程响应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 个解决方案

解决方案1
6 已采纳 2010-07-18 18:35:54

解决方案2
3 2010-07-18 18:13:53

解决方案3
0 2010-07-18 18:10:19

解决方案4
0 2010-07-18 18:17:52

解决方案5
0 2010-07-18 18:31:01

解决方案6
0 2010-07-18 18:32:53

解决方案7
-1 2010-07-18 18:10:54

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

问题描述

7 个解决方案

解决方案1 6 已采纳 2010-07-18 18:35:54

解决方案2 3 2010-07-18 18:13:53

解决方案3 0 2010-07-18 18:10:19

解决方案4 0 2010-07-18 18:17:52

解决方案5 0 2010-07-18 18:31:01

解决方案6 0 2010-07-18 18:32:53

解决方案7 -1 2010-07-18 18:10:54

解决方案1
6 已采纳 2010-07-18 18:35:54

解决方案2
3 2010-07-18 18:13:53

解决方案3
0 2010-07-18 18:10:19

解决方案4
0 2010-07-18 18:17:52

解决方案5
0 2010-07-18 18:31:01

解决方案6
0 2010-07-18 18:32:53

解决方案7
-1 2010-07-18 18:10:54