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

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

javascript jquery

Javascript 如何使用动态创建的字段？,javascript,jquery,dynamic-data,Javascript,Jquery,Dynamic Data,我有网页布局，它可以包含几个链接。这些链接是使用AJAX函数动态创建的。它工作正常但是，我不知道如何处理那些“动态创建的链接”（即，如果我点击它们，如何调用一些JS或jQuery函数）。我猜浏览器无法识别它们，因为在加载页面后会创建它们是否有一些功能可以“重新呈现”我的页面和页面上的元素 Tnx在adv上对你的帮助这些链接是如何动态创建的？您可以使用正确的，因为它们使用相同的类名或驻留在相同的标记中，等等。如果您的链接是通过AJAX传入的，您可以在服务器上设置onclick属性。只需将链接

我有网页布局，它可以包含几个链接。这些链接是使用AJAX函数动态创建的。它工作正常

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

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

Tnx在adv上对你的帮助

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

如果您的链接是通过AJAX传入的，您可以在服务器上设置

onclick

属性。只需将链接输出到AJAX中，如下所示：

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

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

返回false

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

希望这有帮助

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

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

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

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

通常，浏览器处理响应

HTML

，并将其添加到DOM树中，但有时，当前定义的事件不起作用，只需在调用ajax请求时重新初始化事件。

考虑HTML表单

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

在这里单击按钮，脚本检查文本框id的值是否为空。如果为空，将返回一条警报消息。。。。我想这就是您正在寻找的解决方案

祝您度过愉快的一天。

使用动态创建的元素所需要做的就是创建标识符，您可以使用这些标识符定位它们。在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");});

$（“.everyonelovesstackoverflow”）.html（“”）；
$（“#l1”）。单击（函数（）{alert（“google”）；}）；
$（“#l2”）。单击（函数（）{alert（“yahoo”）；}）；

你现在应该有两个链接，广告通常是动态创建的，然后添加一个onclick处理程序来显示一个警报（我没有阻止默认行为，所以它会导致你离开页面）

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

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

第一个是

.live（）

方法，另一个是

.delegate（）

方法

第一个的用法非常简单：

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

如您所见，第一个参数是要绑定的事件，第二个参数是处理该事件的函数。其工作方式并不完全像“重新渲染”。执行此操作的常用方法（

$（“#dynamiccelement”）。单击（…）

或

$（“#dynamiccelement”）。绑定（“单击”，…）

）的工作方式是在DOM正确加载（

$（document）.ready（…）

）后将确定事件的事件处理程序附加到DOM元素。现在，很明显，这对动态生成的元素不起作用，因为它们在DOM首次加载时不存在

live（）的工作方式是，它不将vent处理程序附加到DOM元素本身，而是利用JS&DOM的冒泡属性将其附加到

document

元素上（当您单击动态生成的元素而没有附加事件处理程序时，它会一直查看顶部，直到找到一个）

听起来不错，对吧？但是这个方法有一个小技术问题，正如我所说的，它将事件处理程序附加到DOM的顶部，因此当您单击元素时，浏览器必须横穿整个DOM树，直到找到合适的事件处理程序。顺便说一句，这个过程效率很低。这里出现了

.delegate（）

方法

让我们假设以下HTML结构：

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

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

编辑：您应该更正标记，该标记无效，因为：1）锚不允许使用值属性，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>

使用该代码，您将在anchorClicked变量中存储已单击链接的id，并在valueClicked中存储与锚关联的编号

阅读jQuery的“live”和“delegate”功能。当你使用jQuery时，这不是真正的方法。哦，我的天啊，内联JavaScript是邪恶的。将其移动到click（）：不喜欢

委托

<代码>$（“#myForm”）.delegate（…我更喜欢“delegate”，但我不记得确切的语法是什么，我懒得看：-）很好，谢谢大家！但是，在我的表格中，我有几个锚元素。代码如何识别单击的是哪一个？确定删除我将在主响应中添加答案。+1。live和delegate方法都解决了我的问题，即当单击相应的remove按钮时，动态添加的表单字段没有被删除（由于您在此处的输入，我最终使用delegate）。

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