admin管理员组

文章数量:1297058

i have a form and when i append another field to it i cant use this in my other function.

<!DOCTYPE html>
<html>
  <head>
     <script src=".3.1/jquery.min.js"></script>
     <script>
        $(document).ready(function(){
          $(".registerNums").click(function(){
              $("#hello").append('<input type="button" value="register" class="inputMems">');
          });
          $(".inputMems").click(function(){
             alert("hi")
         });
       });
   </script>
  </head>
  <body>
    <div>
      <form>
        <div id="hello"></div>
        <input type="button" value="register mems" class="registerNums">
      </form>
    </div>
  </body>
</html>

look my inputMems button doesnt work : /

i have a form and when i append another field to it i cant use this in my other function.

<!DOCTYPE html>
<html>
  <head>
     <script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script>
        $(document).ready(function(){
          $(".registerNums").click(function(){
              $("#hello").append('<input type="button" value="register" class="inputMems">');
          });
          $(".inputMems").click(function(){
             alert("hi")
         });
       });
   </script>
  </head>
  <body>
    <div>
      <form>
        <div id="hello"></div>
        <input type="button" value="register mems" class="registerNums">
      </form>
    </div>
  </body>
</html>

look my inputMems button doesnt work : http://jsfiddle/Yelesee/3uecqLxn/

  • javascript
  • html
Share edited Aug 9, 2018 at 11:36 Quick learner 11.5k4 gold badges51 silver badges61 bronze badges asked Aug 9, 2018 at 10:56 Abolfazl EbadiAbolfazl Ebadi 699 bronze badges
Add a ment  | 

5 Answers 5

Reset to default 10

To bind events in dynamic content you need to use 

$(parent_selector).on(event, selector, callback);

So, essentially it adds the event to the parent element and checks the e.target and fires the event if it matches your selector.

So, in your case you can use,

$('#hello').on('click', '.inputMems', function(){
    ///do here
});

One more thing you can do is attaching the event listener AFTER the new dom has been created.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".registerNums").click(function(){
        $("#hello").append('<input type="button" value="register" class="inputMems">');
    });
    $("#hello").on('click','.inputMems',function(){console.log("hi");});
});
</script>
</head>
<body>

<div>
<form>
<div id="hello"></div>

<input type="button" value="register mems" class="registerNums">
</form>
</div>

</body>
</html>

Since you are dynamically adding the DOM element with reference to id = hello, The click() wont work. It will work for the elements that already exist. It won't get bound to elements created dynamically. To do that, you'll have to create a "delegated" binding by using on().

Replace your click event 

 $(".inputMems").click(function(){
     alert("hi")
 });

to this!

 $("#hello").on("click", "input.inputMems", function(){
   alert("Here u go!");
 });

JSFIDDLE

As an alternative to the other answers you can define the click handler when you create the element. Although i do remend to use .on('click', function(){});

$(document).ready(function() {
  $(".registerNums").click(function() {
    var newInput = $('<input type="button" value="register" class="inputMems">');
    newInput.click(function() {
      alert("hi")
    });
    $("#hello").append(newInput);
  });
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <form>
    <div id="hello"></div>

    <input type="button" value="register mems" class="registerNums">
  </form>
</div>

You have insert

$(".inputMems").click(function(){
alert("hi")
});

inside $(".registerNums").click(function(){ $("#hello").append('<input type="button" value="register" class="inputMems">'); }); .

It should be like this

$(document).ready(function(){
$(".registerNums").click(function(){
    $("#hello").html('<input type="button" value="register" class="inputMems">');
    $(".inputMems").click(function(){
    alert("hi");
});
});

});

本文标签： html tags not working in JavascriptStack Overflow

版权声明：本文标题：html tags not working in Javascript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741647304a2390262.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。