方法问题上的jQuery

Question

Hi 2 all我正在使用jQuery .On方法来追加行，当我第一次单击add row按钮时，它会追加行，但当第二次和下一次单击时，它将不会做任何事情。我需要知道为什么我的.on方法不起作用，这里是我的代码

<div class="form">
<?php
$form = $this->beginWidget('CActiveForm', array(
    'id' => 'productoption-form',
    'enableAjaxValidation' => false,
));
?>
<p class="note">Fields with <span class="required">*</span> are required.</p>
<?php echo $form->errorSummary($model); ?>

<div class="row">
    <?php echo $form->labelEx($model, 'title'); ?>
    <?php echo $form->textField($model, 'title', array('size' => 60, 'maxlength' => 255)); ?>
    <?php echo $form->error($model, 'title'); ?>
</div>
<div class="row">
    <strong><h3>Add Product Options</h3></strong>
</div>
<div class="row">
    <div class="span-6 headrowname"><strong>Name</strong></div>
    <div class="span-4 headrowprice"><strong>Price</strong></div>
    <div class="span-2"></div>
</div>
<div class="appendrow">
    <div class="row ">
        <div class="span-6">
            <input style="width:100%!important;" type="text" name="option_name" placeholder="Name" required />
        </div>
        <div class="span-4 ">
            <input id="pricetext" type="text" name="option_price" placeholder="Price" required />
        </div>
        <div class="span-2"><input type="button" class="btn btn-primary addrowbtn" value="Add Row" name="addrow" /> </div>
    </div>
</div>
<div class="row buttons">
    <?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>
</div>
<?php $this->endWidget(); ?>

​

<script>

        $('.addrowbtn').on('click','', function() {
            $('.appendrow').append('<div class="row">\n\
            <div class="span-6">\n\
            <input style="width:100%!important;" type="text" name="option_name" placeholder="Name" required />\n\
            </div><div class="span-4 ">\n\
            <input id="pricetext" type="text" name="option_price" placeholder="Price" required />\n\
            </div><div class="span-2">\n\
            <input type="button" class="btn btn-primary addrowbtn" value="Add Row" name="addrow" />\n\
            </div>\n\
            </div>');
        });

</script>

Answer 1

Jquery只将onclick事件附加到.addrowbtn的第一个实例，而不是新添加的实例，因为它们是动态生成的，所以它最终会生成多个不起作用的“添加行”按钮。

虽然你可以动态地将onclick事件重新附加到这些新按钮上，但我认为处理这一问题的更好方法是在.appendrow div之外使用单个“Add Row”按钮，以下是使用您的代码的小提琴：

http://jsfiddle.net/unez9Lrf/