jQuery code called from PHP won't execute

Question

I'm developing a Wordpress site that (of course) is composed of multiple PHP templates. The particular template fragment I'm having problems with is called with this line:

<script id="templatehidden">                                    
    <?php get_template_part( 'fragments/calculator', 'row-sa' ); ?>
</script>

And the contents of calculator-row-sa.php are:

<div class="form-row pricingrow select-multiple">
<div class="form-controls"> 
<img class="remove-field-sa" style="float: left; margin-right: 30px;" src="http://45.32.89.214/wp-content/uploads/2016/04/minus.png">
<i style="margin-left: 50px;" class="cardinal"></i>
    <select name="field-followers[]" class="select followerselect">
        <?php foreach ( $options as $option ) : ?>
            <option value="<?php echo $option[ 'value' ] ?>"><?php echo $option[ 'label' ] ?></option>
        <?php endforeach; ?>
    </select>
    <b class="fa fa-caret-down" aria-hidden="true" style="color: #747474";></b>     
    <span class="acctprice"></span>
</div><!-- /.form-controls -->

And the jQuery code behind it is

$('.remove-field-sa').click(function () {           
        $(this).closest('.form-row').remove();
    });

My problem is with the img element inside the php. When the page first loads, it does its job and removes the row it's on. However, after I add more rows, no javascript code seems to execute within .form-content anymore. Any ideas on what's wrong?

jeroen · Accepted Answer · 2016-04-29 12:09:01Z

2

Assuming that you are adding the rows using javascript, you need event delegation: At the moment you bind your even handler, the elements don't exist and when you add them, the click event is not automatically binded to these new elements unless you use event delegation.

You can easily change that using for example:

$('.form-content').on('click', '.remove-field-sa', function () {           
    $(this).closest('.form-row').remove();
});

Note that here the .form-content element has to be present on page-load. If it is not, you could also use something like:

// Any parent element that is present at page-load and will contain the child elements will do.
$('body').on('click', '.remove-field-sa', function () {           
    $(this).closest('.form-row').remove();
});

answered Apr 29, 2016 at 12:09

jeroen

91.8k22 gold badges118 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

izk Over a year ago

Nice. isn't the delegate function also possible? maybe just in case the jquery gets updated later on.

jeroen Over a year ago

@baboizk Yes, but note that on() is not deprecated. Are you perhaps thinking of live()?

izk Over a year ago

Yes, that's it ! live() got replaced by on(). apologies

Danesan Dragos Over a year ago

Thanks a lot! It worked! Looks like I've got a lot to learn about events, handlers and delegations, but at least, for now, it worked.

Collectives™ on Stack Overflow

jQuery code called from PHP won't execute

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related