Question

我有以下代码，它将点击事件绑定到div中存在的多个锚标记。

我想确定点击了哪个链接（第一个链接或第二个链接或第n个链接），以便我可以将其传递给myFunction。

function bindClickEvent(){
    $.each($("#links > li > a"), function(index, element){
        $(element).click(function(event){
        myFunction(linkID);
        });
    });
}

我使用上述类型函数的原因是因为在链接div中创建的锚标签是动态创建的。即使用其他功能构建html

Answer 1

尝试这样的事情：http://jsfiddle.net/wo3o55yL/1/

<div>
    <a href="">One</a>
    <a href="">Two</a>
    <a href="">Three</a>
    <a href="">Four</a>
</div>

<script type="text/javascript">
$('a').on('click', function(e){
    e.preventDefault();
    myFunction($('a').index(this));
});


function myFunction(id) {
    alert('my function - ' + id);
}
</script>

第一个点将被归类为零，这就是为什么one is 0和two is 1等等......

Answer 2

您应该使用事件委派来实现此目标，如下所示：

给定HTML：

<div id="links" >
</div>

<强> JavaScript的：

$(function() {

    // Just a simulation for dynamic links
    setTimeout(function() {
        var as = [];

        for(var i = 0 ; i < 5 ; ++i) {
            as.push('<a href="">Element-' + (i+1) + '</a>');
        }

        $('#links').html(as.join('<br />'));
    }, 2000);

    // Event delegation
    $('#links').on('click', 'a', function(e){
        e.preventDefault();
        myFunction($('a').index(this));
    });


    function myFunction(id) {
        alert('my function - ' + id);
    }
});

Answer 3

您也可以这样做，请参阅工作演示http://jsfiddle.net/g8k1csz9/

<ul id="links">              
    <li><a href="#">Something1</a></li>
    <li><a href="#">Something2</a></li>
    <li><a href="#">Something3</a></li>
    <li><a href="#">Something4</a></li>
</ul>

$( "#links li a" ).click(function() {
  var index = $('#links li a').index(this);
  myfunction(index);
});

function myfunction(index){
alert(index);
}

在div元素中查找第n个锚标记

3 个答案: