Question

我有一个主文档div，通过变量"str"

添加一些html元素

<div id='documentDiv'></div>

我的功能会在我的#documentDiv中添加一些html元素。

var str="<div class='customElement'></div><a href='' onclick='append(event);'>append</a>"

我有一个功能可以str追加documentDiv我想要的时间：

 $('#documentDiv').append(str);

在追加两次后，我在documentDiv元素

中附加了两次相同的结构

<div id='documentDiv'>
   <div class='customElement'></div><a href='' onclick='append(event);'>append</a> // want to append some text to respective .customElement div
   <div class='customElement'></div><a href='' onclick='append(event);'>append</a>
</div>

我的问题在于onclick，我想在customElement类下的 相应的div 中添加一些内容。但是onClick， 它总是被附加到第一个div 。如何使用jquery获得相应的div元素？

function append(event){
   $('.customElement').append("some text");
}

Answer 1

也许这可以帮到你：没有标签：

$('.customElement').bind('click',function(){
    $(this).append("some text"); 
});

或使用a-tag：

$('.customElement a').bind('click',function(){
    $(this).parent().append("some text"); 
});

Answer 2

我相信你想要用它。

function append(event){
   $(this).append("some text");
}

Answer 3

由于您要动态添加元素，因此您应该通过将on方法添加到父元素来委派事件。

这是一个例子。

＆＃13;

function append(event){
   $(this).prev().append("some text");
   event.preventDevault();
}

$('#documentDiv').on('click', 'a', append);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id='documentDiv'>
   <div class='customElement'></div><a href='#'>append</a>
   <div class='customElement'></div><a href='#'>append</a>
</div>

＆＃13;

使用jquery在相同的类下获取相应的div元素

3 个答案: