jQuery关于方法问题[重复]

Question

嗨 2 我正在使用 jQuery.On 方法来追加行，当我第一次单击添加行按钮时，它会追加行，但是当第二次和下一次时它什么也不做。我需要知道为什么我的 .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 之外使用单个“添加行”按钮，这是使用的小提琴你的代码：

http://jsfiddle.net/unez9Lrf/