使用具有多个元素的Class选择Element

时间:2015-01-05 11:34:53

标签: javascript jquery

我有一个从查询中获取数据的ajax调用,我将标记添加到页面中以显示结果,如下所示:

 $('.address-results').append("<div class='address-result'><h5 class='bold-blue'>" + po.CompanyName + "<span class='glyphicon glyphicon-info-sign address-icon'></span></h5><span>" + po.Street + "</span><br/><span>" + po.Town + "</span><br/><span>" + po.County + "</span><br/><span>" + po.Postcode + "</span><br /><button class='btn btn-sm btn-member' id = "+ po.Id+">Enquire</button></div>")

当渲染结果时(10)我想选择我生成的按钮,其中GUIDID,结果全部带回按钮的相同类,我想要定位单击的按钮,然后获取ID,以便我可以执行另一个查询。我似乎无法得到它只是不断重新加载页面的按钮,我想知道是否有许多按钮具有相同的类,它不知道哪个按钮?我已经看过控制台了,所有元素都存在。这是我用来尝试定位按钮的jQuery,但我只想要我选择的那个。

$('.btn-member').on('click', function (e) {
    e.preventDefault();
    alert('hi');
    var id = $(this).attr("id");
    alert(id);
});

1 个答案:

答案 0 :(得分:1)

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码进行事件绑定调用时的页面上。

在动态添加HTML时,您需要使用Event Delegation委托事件方法{。}}。

$(document).on('event','selector',callback_function)

实施例

$('.address-results').on('click', ".btn-member", function(){
    //Your code
});

代替document,您应该使用最近的静态容器。

此外,您应该使用自定义data-前缀HTML属性。哪个可以使用.on()

获取
//Event Binding
$('.address-results').on('click', ".btn-member", function(){
    alert($(this).data('id'))
});

//Append element
$('.address-results').append("<button class='btn-member' data-id='"+ po.Id+"'>Enquire</button>")

&#13;
&#13;
$(document).ready(function() {
  //Event Binding
  $('.address-results').on('click', ".btn-member", function() {
    alert($(this).data('id'))
  });

  //Append element
  $('.address-results').append("<button class='btn-member' data-id='" + 12345 + "'>Enquire</button>")

});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='address-results'></div>
&#13;
&#13;
&#13;