如何处理动态创建的字段？

Question

如何处理动态创建的字段？

javascriptjquerydynamic-data

7

我有一个网页布局，上面可以包含多个链接。这些链接是使用 AJAX 功能动态创建的，它们能正常工作。

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

是否有一些函数可以“重新渲染”我的页面和其中的元素？

谢谢你的帮助！

- user198003

2

阅读有关jQuery的“live”和“delegate”功能的相关资料。 - Pointy

7个回答

3

在您的页面初始化代码中，您可以像这样设置处理程序：

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

您只需要通过 class 或其他方式识别输入元素。

- Pointy

不喜欢“delegate”吗？ $('#myForm').delegate(... - James

我更喜欢“委托”，但我无法准确记住语法，而且我太懒得找了 :-) - Pointy

0

考虑 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的值是否为空。如果为空，它将返回一个警报消息......我认为这是您正在寻找的解决方案.....

祝您有美好的一天。

- Jaison Justus

0

你需要做的就是创建可以定位动态创建元素的标识符。在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将允许您自动向新创建的元素添加处理程序。

- Philip Tinney

0

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

- yclian

0

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

- shox

-1

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

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

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

希望这可以帮到你！

- mattbasta

1

当你使用jQuery时，这真的不是正确的方法。 - Pointy

1

哦我的天啊，内联JavaScript是邪恶的。将其移动到click()函数中：http://api.jquery.com/click/ - yclian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rodolfo Palma · Accepted Answer

您可以使用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 和 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）锚不允许使用value属性，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中存储与该链接相关联的数字。