将CSS应用于动态生成的元素

Question

I am trying to work out how to call my .each() function with a $(document).ready and a click event, at the moment I have this

$(document).ready(function(){
  $(".help-inline").each(function() {
    $(this).css('display', 'none');
  });
});

Within a form of mine using nested_form I can clone a field clicking '.example_button' and would like to apply the display:none rule to the newly created element within my DOM.

I have tried this, but obviously the rule is only applied when i click the '.examnple_button'

$(document).on('click', '.example_button', function(){
   $(".help-inline").each(function() {
     $(this).css('display', 'none');
   });
});

How can i apply the css rules under both circumstance?

Thanks

Answer 1

You can try this :

$(document).on('focus', '.example_button', function(){
   $(".help-inline").css('display', 'none'); //or $(".help-inline").hide();
});

The .each() which you are using to iterate '.help-inline' is not required ,jquery will automatically iterate all elements with class help-inline in DOM.

OR

As far i understand your question you are cloning a field clicking '.example_button' then one thing you can do is that hide the element when you are creating it otherwise there must be a event on which you want to hide '.help-inline' elements,use that event with .on() and hide elements with class 'help-inline' inside DOM.

Answer 2

Break the common code out into a function, and call it in both instances.

function hideAllTheInlineHelps() {
    $('.help-inline').hide(); // or .css('display', 'none')
}

$(document).ready(function() {
    hideAllTheInlineHelps();
});

$(document).on('click', '.example_button', function() {
    hideAllTheInlineHelps();
});

---

Update

Thanks to @Kartikeya for pointing out that you want the function to run without clicking the button .

Looking at the docs for "nested_form" , it seems you can react to the nested:fieldAdded event:

$(document).on('nested:fieldAdded', function(evt) {
    hideAllTheInlineHelps();
    // or $('.help-inline').hide();
});