Question

我正在尝试动态地将字段添加到网页，以便用户可以在表单中输入其他设施。通过单击添加设施按钮，我可以添加字段就好了。但是我无法动态地从输入字段中获取值。目标是显示他们离开现场后输入的内容（使用(':text').blur(myFunction);）。这适用于我用过的其他所有领域，但出于某种原因，在离开'amenity'字段后，我无法获得动态拉动的价值。

$('#new_amenity').on('click', function (event) {

  amenity++;
  $(this).prev().after('<br/><input type="text" value="" class="' + amenity + '" placeholder="Amenity" id="amenity" />');


  event.preventDefault();

});

下面是我尝试用来分配给数组的代码。

//inside myfunction();
for(var i=1; $('#amenity').hasClass('.' + i);i++){
     amenities[i]=$('.'+i).val();   
}

//outside of function
$(":text").blur(myfunction);

Answer 1

您需要为动态元素使用事件委派。

$('body').on('change', 'input', myfunction);

Answer 2

hasClass function只需要名称，它与通常的选择器不同。它不需要前面的时期。

for(var i=1; $('#amenity').hasClass(i);i++){
     amenities[i]=$('.'+i).val();   
}

Answer 3

我添加了一个可以帮助你的jsfiddle http://jsfiddle.net/fjCx7/3/。

你在这里有很多事情要做。首先，你不应该在多个事情上使用相同的ID（不良做法）

你的on blur事件只会受到文档加载的限制，你需要一些可以动态运行的东西。

$（'＃container'）。on（'blur'，'。otherClass'，myfunction）;

不是使用for循环遍历元素，而是先预先给它一个已知的类，这样你就可以在它们上面执行每个元素

$('#container .otherClass').each(function(idx, item){
    amenities.push($(item));
});

希望这会对你有帮助。

同样knockout非常善于为你做这样的事情，所以你不必亲自去做。

Answer 4

假设你在页面加载/文档就绪时运行它：

//outside of function
$(":text").blur(myfunction);

您添加的所有新项目都未将myFunction与模糊事件联系起来 - 只有页面加载时存在的项目才能获得绑定。像其他人说的那样，你需要使用事件委托或事件冒泡。

<强> HTML

<form id="amenities">
    <fieldset class="amenities">

    </fieldset>
    <button id="new_amenity">Add Amenity</button>
</form>

<强> JS

$('#new_amenity').on('click', function (event) {

    var count = $('.amenities').find('input').length;
    var amenity = '<br/><input type="text" value="" class="amenity-' + count + '" placeholder="Amenity" id="amenity" />';

    $('.amenities').append(amenity);

  event.preventDefault();

});

function myfunction(){
    //blah
}

$(".amenities").on('blur', 'input', myfunction);

在jQuery中动态添加字段和内容

4 个答案: