对动态内容使用触发器

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

您不需要实际 class 名称中的点，只需要在 css 选择器中。而不是 class="b-1 .main-button" 你想要：class="b-1 main-button"。其他 classes 也一样。

注意：您还必须有产品按钮的 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

我对你的问题的解释是：

当我点击 .b-1 时，会点击 .b-2。
第一个按钮的点击与第二个按钮的点击相关联 class 名称，意思是 .b-1.main-button 到 .b-2.main-button 和 .b-1.product-id 到 .b-2.product-id分别.

注意：您的代码有一个错误，您在 HTML 中错误地标记了 classes。因此改变：

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

如果我正确解释了你的问题，那么你应该有一个基于上述的解决方案。如有任何问题，请在下方评论中提问。

对动态内容使用触发器

Using trigger with dynamic content

javascript

jquery

eventtrigger

dynamic-content