If I generate HTML elements using append, can I affect them using jQuery after that?

Question

I used the append method in jQuery to generate some HTML input boxes; now I want to make some effects on those input elements using jQuery but I can't. This is a little example of what I wanna do.

 <style type="text/css"></style>
 <style>
 .focus
 {
   background-color: green;
 }
 </style>
 <script src="alu_afric/Java/java.js"></script>
 <script>
$(document).ready(function() {
  $("button").click(function() {
    $("#newHTML").append('<input type="text" placeholder="some text .."/>');
  });
  $("input").focus(function() {
    $(this).addClass("focus");
  });
});
 </script>
 <button>Click</button>
<body>
<div id="newHTML"></div>
</body>

You could just have a `input:focus { background-color: green; }` in the css, then you have no need to worry about jquery — Bassie, Sep 17 '16 at 14:34

Rahul Patel · Accepted Answer · 2016-09-17T14:33:59.397

0

The event listener should be

$( document ).on( 'focus', 'input[type=text]', function() {

Instead of

$("input").focus(function(){

Please check snippet for more understanding.

$(document).ready(function(){
  $("button").click(function(){
    $("#newHTML").append('<input type = "text" placeholder = "some text .."/>');
  });
  $( document ).on( 'focus', 'input[type=text]', function() {
    $(this).addClass("focus");
  });
});

.focus
 {
   background-color: green;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>
<body>
  <div id = "newHTML"></div>
</body>

edited Sep 17 '16 at 14:33

answered Sep 17 '16 at 14:28

Rahul Patel

5,248
2
14
26

thanks for answering but it gives me the same result – M-Amr Moussa Sep 17 '16 at 14:31
The So should have to use $( document ).on( 'focus', 'input[type=text]', function() { event listener instead of $("input").focus(function(){ – Rahul Patel Sep 17 '16 at 14:35
@M-AmrMoussa have you checked updated answer? – Rahul Patel Sep 17 '16 at 14:38
thanks man that saved my life !! – M-Amr Moussa Sep 17 '16 at 14:42

naviciroel · Answer 2 · 2016-09-17T14:37:49.763

Yes you can. As long as you append html first then bind the event you want for it.

 $(document).ready(function(){
  $("button").click(function(){
//for safe calling lets add a class
    $("#newHTML").append('<input type = "text" placeholder = "some text .." class="inpt-class"/>');
  //after the input is add to the page add an event for it
  // either use or .on() or .focus()
  $("input.inpt-class").focus(function(){
    $(this).addClass("focus");
  });
  });
});

score 0 · Answer 3 · answered Sep 17 '16 at 14:31

If you use the appendTo method instead you can store your input-element in a variable and make changes to it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style = "txt/css"></style>
 <style>
 .focus
 {
   background-color: green;
 }
 </style>
 <script src = "alu_afric/Java/java.js"></script>
 <script>
$(document).ready(function(){
  $("button").click(function(){
    var input = $('<input type = "text" placeholder = "some text .."/>');
    input.appendTo("#newHTML");
    input.css('background', 'red');
  });
  $("input").focus(function(){
    $(this).addClass("focus");
  });
});
 </script>
 <button>Click</button>
<body>
<div id = "newHTML"></div>
</body>

If I generate HTML elements using append, can I affect them using jQuery after that?

3 Answers3