Question

我有一个从查询中获取数据的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）我想选择我生成的按钮，其中GUID为ID，结果全部带回按钮的相同类，我想要定位单击的按钮，然后获取ID，以便我可以执行另一个查询。我似乎无法得到它只是不断重新加载页面的按钮，我想知道是否有许多按钮具有相同的类，它不知道哪个按钮？我已经看过控制台了，所有元素都存在。这是我用来尝试定位按钮的jQuery，但我只想要我选择的那个。

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

Answer 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;

$(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;

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

1 个答案: