如何以编程方式单击按钮并使用 jQuery 传递参数？答案

【问题标题】：How to programmatically click a button and pass arguments using jQuery?如何以编程方式单击按钮并使用 jQuery 传递参数？
【发布时间】：2020-10-25 22:43:20
【问题描述】：

我正在使用 jQuery 构建前端页面。我希望以编程方式单击一个按钮并向该按钮的 jQuery 函数发送一些参数。

按钮的 id 是“btnAdd”。点击后调用的jQuery函数如下：

$(document).ready(function() {
    $("#btnAdd").bind("click", { value: sizes }, function(event) {
        console.log(event.data.value);
    });
});

我正在以编程方式单击按钮并使用此代码传递参数：

$(document).ready(function() {
    $("#sel").change(function() {
        var sizes= ['11','12'];
        $("#btnAdd").click();
    });
});

此代码正在单击按钮但未传递参数。可能是什么错误？

【问题讨论】：

它可能与范围有关。看起来您在 .change 函数内定义了 sizes 变量，因此绑定事件可能无法访问该变量。 console.log 输出什么？
它说：'Uncaught ReferenceError: sizes is not defined' for the line : '$("#btnAdd").bind("click", { value: sizes }, function(event) { '
是的，这就是问题所在。您在 .change 函数中定义大小，因此 .bind 无权访问它。您需要在任何函数之外定义它。

标签： javascript jquery arguments click frontend

【解决方案1】：

使用trigger(event, data)

$(document).ready(function() {
  $("#btnAdd").on("click", function(event, data) {
    if (data) {
      console.log('Data sent', data.sizes);
    }else{
      console.log('No data')
    }
  });
});



$(document).ready(function() {
  $("#sel").change(function() {
    var sizes = ['11', '12'];
    $("#btnAdd").trigger('click', {sizes: sizes});
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnAdd">click me</button>
<br/>
<label>Check to send data <input type="checkbox" id="sel" /></label>

【讨论】：