使用带有动态内容的触发器

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"。其他类也一样。

注意：您还必须为产品按钮设置 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>

Answer 2

我对你问题的解释是：

1. 当我点击.b-1 时，会点击.b-2。
2. 第一个按钮的点击通过类名与第二个按钮的点击相关联，分别表示.b-1.main-button 到.b-2.main-button 和.b-1.product-id 到.b-2.product-id。

注意：您的代码有一个错误，您在 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>

如下：

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

现在进入处理 trigger() 的 JQuery。这很简单。当你点击一个按钮时，触发另一个按钮的点击事件：

$(document).ready(function(){
  // Trigger click when clicking on respective b-1 button
  $(".b-1.main-button").click(function(){
    $(".b-2.main-button").trigger("click");
  });
  $(".b-1.product-id").click(function(){
    $(".b-2.product-id").trigger("click");
  });
  // Show an alert to identify which click was triggered
  $(".b-2.main-button").click(function(){
    alert("Main Button 2");
  });
  $(".b-2.product-id").click(function(){
    alert("Product Button 2");
  });
});

<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">Main Button 1</button>
    <button class="b-1 product-id">Product Id 1</button>
</div>
<div class="button-wrap">
    <button class="b-2 main-button">Main Button 2</button>
    <button class="b-2 product-id">Product Id 2</button>
</div>

如果我正确解释了您的问题，那么您应该有基于上述内容的解决方案。您有任何问题，请在下面的 cmets 中提问。