このオブジェクトはJavaScriptで動作していません

私はしようとしましたが、私は十字ボタンをクリックすると、リストを削除するようです。なぜ誰かがここで働いていないのですか？「this」オブジェクトを使用する以外に、どの十字ボタンがクリックされたかを知るための他の方法がありますか？ここでこのオブジェクトはJavaScriptで動作していません

$(function(){ 
 
\t $("#btn").on("click",function(){ 
 
\t var text = $("#input").val(); 
 
\t if(text==""){ 
 
\t \t alert("please enter a task!"); 
 
\t } 
 
\t else{ 
 
\t var task = $("<li></li>").text(text); 
 
\t $(task).append("<button class= 'rem'>X</button>"); 
 
\t $("#ordered").append(task); 
 
\t } 
 
}); 
 
\t $(".rem").on("click",function(){ 
 
\t \t $(this).hide(1000); 
 
\t }); 
 

 
});

<!DOCTYPE html> 
 
<html lang = "en"> 
 
<head> 
 
\t <title>Javascript Addition</title> 
 
\t <meta charset = "utf-8"> 
 
\t 
 
\t </head> 
 
\t <body> 
 
\t \t <h1>My To-Do List </h1> 
 
\t \t <input id = "input" placeholder ="Add your task Here..."> 
 
\t \t <button id = "btn">clickkk</button> 
 
\t \t <ol id = "ordered"> 
 
\t \t \t </ol> 
 
\t \t <script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script> 
 
    <script src="todo.js"></script> 
 
    </body> 
 
    </html>

出典

2017-07-02 iAmRoot

あなたはこの

<!DOCTYPE html> 
    <html lang = "en"> 
     <head> 
      <title>Javascript Addition</title> 
      <meta charset = "utf-8"> 
     </head> 
     <body> 
      <h1>My To-Do List </h1> 
      <input id = "input" placeholder ="Add your task Here..."> 
      <button id = "btn">clickkk</button> 
      <ol id = "ordered"></ol> 

     </body> 
     <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
     <script src="todo.js"></script> 
     <script type="text/javascript"> 
     $("#btn").on("click", function() { 
      var text = $("#input").val(); 
      if (text == "") { 
       alert("please enter a task!"); 
      } else { 
       $("#input").val(""); 
       var task = $("<li></li>").text(text); 
       $(task).append("<button class='rem'>X</button>"); 
       $("#ordered").append(task); 
      } 
     }); 

     $("body").delegate('.rem', "click", function() { 
      $(this).parent().hide(); 
     }); 
     </script> 
    </html>

を試すことができます

出典

2017-07-02 10:14:22

ボタンを非表示にすることができます方法です。代わりに$(".rem").on("click",function(){の、あなたは$("body").on("click", '.rem', function() {

$(function() { 
 
    $("#btn").on("click", function() { 
 
    var text = $("#input").val(); 
 
    if (text == "") { 
 
     alert("please enter a task!"); 
 
    } else { 
 
     var task = $("<li></li>").text(text); 
 
     $(task).append("<button class='rem'>X</button>"); 
 
     $("#ordered").append(task); 
 
    } 
 
    }); 
 
}); 
 

 
$("body").on("click", '.rem', function() { 
 
    $(this).parent().hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>My To-Do List </h1> 
 
<input id="input" placeholder="Add your task Here..."> 
 
<button id="btn">clickkk</button> 
 
<ol id="ordered"> 
 
</ol>

出典

2017-07-02 08:15:13

使用event delegationを使用することができます。動的にliを追加しているからです。あなたを削除するには、最も近いliを見つけてそれを隠す必要があります。

$(function(){ 
 
\t $("#btn").on("click",function(){ 
 
\t var text = $("#input").val(); 
 
\t if(text==""){ 
 
\t \t alert("please enter a task!"); 
 
\t } 
 
\t else{ 
 
\t var task = $("<li></li>").text(text); 
 
\t $(task).append("<button class= 'rem'>X</button>"); 
 
\t $("#ordered").append(task); 
 
\t } 
 
}); 
 
\t $(document).on("click",'.rem',function(){ 
 
\t  $(this).closest('li').hide(); 
 
\t }); 
 

 
});

<!DOCTYPE html> 
 
<html lang = "en"> 
 
<head> 
 
\t <title>Javascript Addition</title> 
 
\t <meta charset = "utf-8"> 
 
\t 
 
\t </head> 
 
\t <body> 
 
\t \t <h1>My To-Do List </h1> 
 
\t \t <input id = "input" placeholder ="Add your task Here..."> 
 
\t \t <button id = "btn">clickkk</button> 
 
\t \t <ol id = "ordered"> 
 
\t \t \t </ol> 
 
\t \t <script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script> 
 
    <script src="todo.js"></script> 
 
    </body> 
 
    </html>

出典

2017-07-02 08:17:05

このオブジェクトはJavaScriptで動作していません

答えて

関連する問題