javascript - jquery selector doesn't work when dynamically append html - Stack Overflow

admin管理员组

文章数量:1355559

I can dynamically append "select" control to DOM,after appending it to DOM,I wanna change the html content of the last "select"(the latest "select" added dynamically),but it failed...

(I cannot set options value in param_html,becuase I should set them by using ajax request later.)

<script>
    $(function(){
      var param_html = '<select class="params"></select>';
      $("input[value='+']").click(function(){
        $('#parameters').append(param_html);
          $('.params :last').html('<option>aaa</option><option>keyword in profile</option><option>last tweet</option>');
      });

    });
  </script>
  <div id="parameters">
    <input type="button" value="+">
    <select class="params"><option>1</option><option>2</option></select>
  </div>

any suggestion is appreciated.

I can dynamically append "select" control to DOM,after appending it to DOM,I wanna change the html content of the last "select"(the latest "select" added dynamically),but it failed...

(I cannot set options value in param_html,becuase I should set them by using ajax request later.)

<script>
    $(function(){
      var param_html = '<select class="params"></select>';
      $("input[value='+']").click(function(){
        $('#parameters').append(param_html);
          $('.params :last').html('<option>aaa</option><option>keyword in profile</option><option>last tweet</option>');
      });

    });
  </script>
  <div id="parameters">
    <input type="button" value="+">
    <select class="params"><option>1</option><option>2</option></select>
  </div>

any suggestion is appreciated.

• javascript
• jquery
• html
• dom

Share Improve this question Follow asked Jun 17, 2011 at 14:45 Mark MaMark Ma 1,36233 gold badges1919 silver badges3535 bronze badges 3

• This is very confusing question, and the script you've provided doesn't seem to make sense in context. Can you try and clarify? – Jivings Commented Jun 17, 2011 at 14:48
• 1 actually, it's a problem in his selector ;) – Patricia Commented Jun 17, 2011 at 14:49
• sorry,my english is poor,I have tried my best to express what I want to say correctly – Mark Ma Commented Jun 17, 2011 at 15:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

take out the space between params and :last

$('.params:last').html('<option>aaa</option><option>keyword in profile</option><option>last tweet</option>');

your content seems to be added after the dom has been loaded.

try live http://api.jquery./live/

Well your CSS selector is imporper should be $('.params:last-child') or $('.params:last') i think the space bar is not allowed there.

Also no one forbis You from using the object you've created:

$(function(){
      var param_html = '<select class="params"></select>';
      $("input[value='+']").click(function(){
        $('#parameters').append(param_html);
          $(param_html).html('<option>aaa</option><option>keyword in profile</option><option>last tweet</option>');
      });

    });

If you are going to use AJAX in future then the same idea will work instead of reselecting the object use to one you've created.

本文标签： javascriptjquery selector doesn39t work when dynamically append htmlStack Overflow