jquery按钮click（）函数不起作用 [英] Jquery button click() function is not working

问题描述

我正在尝试创建动态表单，用户可以根据需要添加动态文本字段。这是我的jQuery代码..

$ $ $ $ $ $ $ $ $'$ $ $ $ $'$ $ $ $'添加）。click（function（）{
var intId = $（＃buildyourform div）。length +1;
var fieldWrapper = $（< div class = \fieldwrapper \\ \\name = \field+ intId +\id = \field+ intId +\/>）;
var fName = $（< input type = \text \name = \name \class = \fieldname \id = \tb+ intId +_ 1 \/>）;
var lname = $（< input type = \text \name = \email \class = \lastname \id = \tb+ intId +_ 2 \\ \\/>）;
var removeButton = $（< input type = \button \class = \remove \value = \-\/> gt ;）;

var addButton = $（< input type = \button \class = \add \id = \add \value = \+ \/>）
removeButton.click（function（）{
$（this ）.parent（）。remove（）;
}）;
fieldWrapper.append（fName）;
fieldWrapper.append（lname）;
fieldWrapper.append（removeButton）;
fieldWrapper.append（addButton）;
$（this）.remove（）;
$（＃buildyourform）。append（fieldWrapper）;

}）;

}）;

和Html代码是...

 < fieldset id =buildyourform> 
< legend>建立您自己的表单！< / legend> 
< div class =fieldwrappername =field1id =field1/> 
< input type =textname =nameclass =fieldnameid =tb1_1/> 
< input type =textname =emailclass =lastnameid =tb1_2/> 
< input type =buttonvalue =+class =addid =add/> 
< / div> 
< / fieldset> 
< input type =submitvalue =sendid =asdasdname =submit/> 
  

检查我的 JSFiddle 也是。

我的错误是当用户第一次点击+按钮，然后点击功能工作，并在我的字段集中添加两个文本字段。但之后，当我点击+按钮，其不触发点击功能。可能是id冲突。请帮助。

解决方案

您需要使用 .on（）在这里。更改：

  $（＃add）。click（function（）{
  

至

  $（＃buildyourform ）.on（'click'，'#add'，function（）{
  

< a href =http://jsfiddle.net/j08691/4QtB4/1/> jsFiddle示例

I am trying to create dynamic form where user can add dynamic text-fields based on their requirement. Here is my jquery code ..

$(document).ready(function() {
    $("#add").click(function() {
        var intId = $("#buildyourform div").length +1;
        var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field" + intId + "\" id=\"field" + intId + "\"/>");
        var fName = $("<input type=\"text\" name=\"name\" class=\"fieldname\" id=\"tb"+ intId +"_1\"/>");
        var lname = $("<input type=\"text\" name=\"email\" class=\"lastname\" id=\"tb"+ intId +"_2\"/>");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");

        var addButton = $("<input type=\"button\" class=\"add\" id=\"add\" value=\"+\" />")
        removeButton.click(function() {
            $(this).parent().remove();
        });
        fieldWrapper.append(fName);
        fieldWrapper.append(lname);
        fieldWrapper.append(removeButton);
        fieldWrapper.append(addButton);
        $(this).remove();
        $("#buildyourform").append(fieldWrapper);

    });

});

and Html code is ...

<fieldset id="buildyourform">
    <legend>Build your own form!</legend>
    <div class="fieldwrapper" name="field1" id="field1" />
       <input type="text" name="name" class="fieldname" id="tb1_1" />
       <input type="text" name="email" class="lastname" id="tb1_2" />
       <input type="button" value="+" class="add" id="add" />
    </div>
</fieldset> 
<input type="submit" value="send" id="asdasd" name="submit" />

Check my JSFiddle also.

Whats wrong with me is when user click on "+" button first time then click function working and it adds two text-fields into my fieldset. But after that when i click on "+" button, its not triggering click function. May be id conflict. Please help.

解决方案

You need to use the event delegation syntax of .on() here. Change:

$("#add").click(function() {

to

$("#buildyourform").on('click', '#add', function () {

jsFiddle example

这篇关于jquery按钮click（）函数不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！