1

我有多个用作按钮的动态创建的锚标记。当单击这些按钮中的任何一个时，我想调用位于另一个文件中的单个 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>

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

4

3 回答 3

7

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

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

和 JavaScript：

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

这会将点击事件绑定到所有.my-button元素，甚至是您尚未创建的元素。替换body为包含所有按钮的父元素，以使这项工作更快一些。

于 2012-07-09T20:23:24.843 回答
1

使用 .on() 函数。

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

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

$("[id^=test]").on('click', function () {
    doSomething();
});
于 2012-07-09T20:25:02.077 回答
1

或者，如果像我一样，你更喜欢原始 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>
于 2012-07-09T20:50:16.237 回答