Question

我遇到以下情况：

var value = document.getElementById("value").value;
if (value = 'a') {
  ('.setting').append('<input type="text" name="name" placeholder="carname">');
}
elseif(value = 'b') {
  ('.setting').append('<input type="text" name="name" placeholder="fruitname">');
}

$(document).ready(function() {
  $("input[name=name]").keyup(function() {
    alert("The text has been changed.");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="username" placeholder="your name">
<select id="value"></select>
<div class="setting"></div>

我遇到的问题是，当我更改输入时，警报不会触发。有人知道我在搞砸吗？

Answer 1

您正在尝试选择一个input属性为name的{{1}}，但是您在HTML中设置的值为"name"。

name="username"

更好的方法是为您的输入提供唯一的$(document).ready(function(){ $("input[name='username']").keyup(function(){ alert("The text has been changed."); }); });并以此进行选择，因此您不必使用属性选择器：

id

<input id="usernameInput" type="text" name="username" placeholder="your name">

Answer 2

$中缺少('.setting')，您应该使用.on来捕获动态创建的元素的事件，最好将其与类一起使用，也可以使用==或===更有可能满足条件。

Live example

您修改的代码：

<input type="text" name="name" class="example" placeholder="your name">
<select id="value"></select>
<div class="setting"></div>

<script>
  var value = document.getElementById("value").value;
  if(value==='a'){
    $('.setting').append('<input type="text" name="name" class="example" placeholder="carname">');
  }

  else if(value==='b'){
    $('.setting').append('<input type="text" name="name" class="example" placeholder="fruitname">');
  }
</script>

<script>
 $(document).ready(function(){
   $('body').on('keyup', '.example', function() {
     alert("The text has been changed.");
   });
 });
</script>

输入keyup jQuery函数不起作用

2 个答案: