Question

我有输入，如果它已被更改，它会切换一个功能。我也有动态创建的表。表中的每一行都有一个addButton。所以，问题是这个alert切换了很多次，所以我改变输入，但我只需要切换一次。怎么处理呢？

$('.inputsearchform').bind('input', function() {
  var addButton = $(".fa.fa-plus");
  addButton.click(function() {
    alert("test");
  });
});

我不需要将click事件添加到此按钮，但我需要从中获取onclick（）事件。但是这个代码只是工作方式，我找到了。顺便说一句，我只需要点击按钮就可以获得此事件，而不是每次我改变输入时都是这样。

问题当onclick更改时，如何检查按钮上的input事件，动态显示？

我尝试添加onclick事件<i class="fa fa-plus" onclick="addButtonF()"> 并在js文件中：function addButtonF(){ alert("test"); }

但我有一个错误addButtonF is not defined。

Answer 1

一开始就是在click处理程序之外定义input，以防止click click的{{1}}多个addButton处理程序调用

所以，问题是这个警报会切换很多次，所以我改变了输入，但我只需要切换一次。

从问题中不清楚哪个元素需要切换一次，或者哪个函数只应调用一次？

仅当我在输入中写入内容时才会出现
addButton。我需要用仅当我点击此按钮时才会发出警报，而不是每次更改时都会发出警报输入

使用事件委派将事件附加到具有className .fa.fa-plus

的动态创建的元素

＆＃13;

$(".inputsearchform").bind("input", function() {
   // create dynamic element
   $("<table class='fa fa-plus'>")
   .html("<tr><td>" 
     + $(".fa.fa-plus").length 
     + "</td></tr>"
   ).appendTo("body");          
});

$(document).on("click", ".fa.fa-plus", function() {
  alert("test");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="text" class="inputsearchform">

＆＃13;

将className替换为未设置class元素的className;使用最新版本的jQuery

＆＃13;

$(".inputsearchform").bind("input", function() {
  var div = document.getElementById("div");
  var table = document.createElement("table");
  div.appendChild(table);
  var tr = document.createElement("tr");
  table.appendChild(tr);
  var td = tr.insertCell(0);
  td.innerHTML = "test";   
  td.className = "try"
});

$(document).on("click", ".try", function() {
  alert("test");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="text" class="inputsearchform">
<div id="div"></div>

＆＃13;

jsfiddle https://jsfiddle.net/1x8ja6qe/2/

每次更改输入时，警报都会切换

1 个答案: