如何使用jquery/javascript处理来自多个动态创建的锚标记的onclick事件

How to handle onclick events from multiple dynamically created anchor tags using jquery/javascript?

本文关键字：创建 动态 事件 onclick jquery 何使用 javascript 处理      更新时间：2023-09-26

我有多个动态创建的锚标记，它们可以作为按钮使用。当点击这些按钮中的任何一个时，我想调用另一个文件中的一个javascript函数，它将完成其余有趣的工作。我的问题是，我无法通过"onclick"事件正确地调用该函数，所以我正在试图找到解决方法，但这对我来说并不那么简单。

我尝试了很多不同的方法，所以我理解这种方法的一些局限性：

带有Javascript的标准HTML锚：

<a href=#" onclick="doSomething(parameter1, parameter2, ...);">Button</a>

这不会有帮助，因为存在同步问题，而且我发现在上面单击时会选择href，这几乎总是我找到的。我真的很喜欢这种工作方式，如果你知道这里有什么解决办法，请告诉我。

通过JQuery:绑定

$(document).ready(function() {
     $("#button_id").click(function() {
         doSomething(parameter1, parameter2, ...);
     });
});

我的绑定问题是，当加载页面时，我有一个函数可以从数据库中获取数据并将其显示在列表中。每个列表元素都有一个按钮，"点击"按钮会调用一个javascript函数，根据我需要从列表元素中提供的任何数据向它传递参数，然后它就会做一些事情。

我知道，为了使Binding正常工作，每个按钮都应该有自己的ID，这样就可以很容易地将它们与Binding方法关联起来。然而，我不知道如何告诉.click函数我有多少ID，也不知道如何给它这些参数（除非我通过调用其他JS函数通过按钮ID捕获它们）。

非常感谢您的任何建议/想法！

编辑：如何将button_data添加到"doSomething（parameter）；"的参数中作用

list_element = '<span class="ui-li-count" data-mini="true">' + button_data + '<a href="#" class="my_button">Button</a>';</span>

请记住，这些数据是从数据库中动态获取的，并在首次加载页面时发布到网站上。

没有必要为此使用id。这与您需要做的相反，因为您正在为一组元素提供相同的功能。相反，你应该给他们一个class来分组：

<a href=#" class="my-button">Button</a>

以及JavaScript:

$(document).ready(function() {
     $('body').on('click', '.my-button', function() {
         doSomething(parameter1, parameter2, ...);
     });
});

这将把click事件绑定到所有.my-button元素，即使是您还没有创建的元素。将body替换为包含所有按钮的父元素，使其工作速度更快。

使用.on（）函数。

http://api.jquery.com/on/

您也可以像test_<id>一样为id添加一个特定的前缀，然后您可以使用通配符选择器：

$("[id^=test]").on('click', function () {
    doSomething();
});

或者，如果你和我一样，你更喜欢原始JS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<script type="text/JavaScript">
function createAnchor( strParentElementId, strLinkText, strLinkHref, intArg1, intArg2 ) {
    var objAnchor   = null;
    var objParent   = document.getElementById( strParentElementId );
    var boolCreated = false;
    if ( objParent != null ) {
        objAnchor = document.createElement( 'A' );
        if ( objAnchor != null ) {
            with ( objAnchor ) {
                style.color = 'yellow';
                innerText   = strLinkText;
                href        = strLinkHref;
                onclick     = function() { doSomething( intArg1, intArg2 ); }
                } //with
            objParent.appendChild( objAnchor );
            boolCreated = true;
            } //if-create-element
       }  //if-get-parent
return boolCreated;
}
function doSomething( intArg1, intArg2 ) {
    alert( 'doSomething( ' + intArg1.toString() + ', ' + intArg2.toString() + ' );' );
return true;
}
</script>
<body>
<a name="hello">Hello</a><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a name="world">World!</a><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<div id="myDiv1" style="background-color:red;"></div><br />
<div id="myDiv2" style="background-color:red;"></div><br />

<script type="text/JavaScript">
createAnchor( 'myDiv1', 'Link 1 - Hello', '#hello', 1, 2 );
createAnchor( 'myDiv2', 'Link 2 - World', '#world', 3, 4 );
</script>
</body>
</html>
相关文章：