Question

我正试图找出如何使用$（document）.ready和click事件调用我的.each（）函数，此时此刻我已经

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

在我使用nested_form的形式中，我可以克隆一个字段，点击＆＃39; .example_button＆＃39;并且想要将display：none规则应用于我DOM中新创建的元素。

我试过这个，但显然只有当我点击＆＃39; .examnple_button＆＃39;

时才会应用此规则

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

我如何在这两种情况下应用css规则？

由于

Answer 1

你可以试试这个：

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

用于迭代.each()的{{1}}不是必需的，jquery将自动迭代DOM中具有类'.help-inline'的所有元素。

或

据我所知，您正在克隆一个字段，点击help-inline然后您可以做的一件事就是在创建元素时隐藏元素，否则必须有一个您要隐藏的事件{{ 1}}元素，将该事件与.on()一起使用，并在DOM中隐藏具有类'.example_button'的元素。

Answer 2

将公共代码分解为函数，并在两个实例中调用它。

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

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

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

更新

感谢@Kartikeya指出您希望该功能在不单击按钮的情况下运行。

查看the docs for "nested_form"，您似乎可以对nested:fieldAdded事件做出反应：

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

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

2 个答案:

更新