jQuery On Method Issue

Question

Hi 2 all i am using jQuery .On method to append rows , when i click add row button first time it append row but when second and next time it will do nothing . I need to know why my .on method is not working Here is my Code

<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>

[event delegation](http://learn.jquery.com/events/event-delegation/) — Bhojendra Rauniyar, Jul 07 '15 at 17:17
Please don't dump all of your code, but only the minimal amount needed to understand the question. The whole top and bottom parts of your page are just noise. — Avner Shahar-Kashtan, Jul 07 '15 at 17:31
I agree with @AvnerShahar-Kashtan, you only needed you `script` section and contents of `
...
` to provide necessary details for your question. — mikhail-t, Jul 07 '15 at 17:37

score 2 · Answer 1 · answered Jul 07 '15 at 17:26

2

Jquery attaches onclick event only to the first instance of .addrowbtn but not to newly added ones since they are generated on the fly, so it ends up generating multiple non-functioning 'Add Row' buttons.

And while you can re-attach onclick event to those new buttons on the fly, I believe the better way to handle this is have single 'Add Row' button outside of .appendrow div, here is the fiddle using your code:

http://jsfiddle.net/unez9Lrf/

answered Jul 07 '15 at 17:26

mikhail-t

4,103
7
36
56

$(document.body).on('click','.addrowbtn', function() {}) solve the problem – FahadAkram Jul 07 '15 at 17:40
@FahadAkram, that does indeed, esp. if you need 'Add Row' button duplicated after each row. You can also narrow it down to `$('.appendrow').on('click','.addrowbtn', function() {}` so that if you need to create more `onclick` events on same page they won't conflict with one attached to whole `$(document.body)`. – mikhail-t Jul 07 '15 at 17:47

jQuery On Method Issue

1 Answers1