輸入keyup jQuery函數不起作用

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

您試圖選擇name屬性為"name"的input ，但是在HTML中設置的值為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">

$("#usernameInput").keyup(function(){ ... });

Answer 2

$ ('.setting') .on ('.setting')缺少$ ，您應該使用.on來捕獲動態創建的元素的事件，最好將其與類一起使用，還應將==或更可能是===用於條件。

現場例子

您的代碼已修改：

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