javascript - 将触发器与动态内容结合使用

Question

我正在动态加载包含一系列按钮的内容。我想在按下第一个按钮时触发第二个按钮的点击，但是触发事件永远不会触发。

jQuery

$(document).on('click', '.main-button', function() {
    var self = $(this).attr('class').split(' ')[0];
    $('button.' + self + '.product-id').trigger('click');
});

HTML

<div class="button-wrap">
    <button class="b-1 main-button"></button>
    <button class="b-1 product-id"></button>
</div>
<div class="button-wrap">
    <button class="b-2 main-button"></button>
    <button class="b-2 product-id"></button>
</div>

Answer 1

您不需要在实际类名中使用点，只需在 css 选择器中使用点即可。您需要的不是 class="b-1 .main-button":class="b-1 main-button"。其他类(class)也一样。

注意:您还必须为产品按钮提供一个 onclick 处理程序，否则您将看不到点击。

$(document).on('click', '.main-button', function() {
    var self = $(this).attr('class').split(' ')[0];
    $('button.' + self + '.product-id').trigger('click');
});

$(document).on('click', '.product-id', function() {
  var klass = $(this).attr('class');
  alert(klass + " prod button triggered");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-wrap">
    <button class="b-1 main-button">B1 main</button>
    <button class="b-1 product-id">B1 prod</button>
</div>
<div class="button-wrap">
    <button class="b-2 main-button">B2 main</button>
    <button class="b-2 product-id">B2 prod</button>
</div>