Question

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

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

标准HTML锚点，使用Javascript：

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

这没有帮助，因为存在同步问题，我发现href将在上面选择，几乎总是我找到了。我真的很喜欢这种工作方式，如果你知道任何解决方法，请告诉我。

通过JQuery绑定：

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

我的绑定问题是，当页面加载时，我有一个函数从数据库中获取数据并将其显示在列表中。每个列表元素都有一个按钮，“点击”将调用一个javascript函数，根据我需要从list元素中提供的任何数据传递参数，然后它将执行某些操作。

据我所知，为了使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>

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

Answer 1

此处无需使用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替换为包含所有按钮的父元素，以使此工作更快一些。

Answer 2

使用.on（）函数。

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

您还可以为test_<id>等ID添加特定前缀，然后您可以使用通配符选择器：

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

Answer 3

或者，如果像我一样，你更喜欢原始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>

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

3 个答案: