Question

我正在开发一个Wordpress网站（当然）由多个PHP模板组成。我遇到问题的特定模板片段用这一行调用：

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

计算器-row-sa.php的内容是：

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

它背后的jQuery代码是

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

我的问题是php中的img元素。页面首次加载时，它会完成其工作并删除它所在的行。但是，在我添加更多行之后，似乎没有任何javascript代码在.form-content中执行。关于什么是错的任何想法？

Answer 1

假设您使用javascript添加行，则需要事件委派：当您绑定偶数处理程序时，元素不存在，当您添加它们时，click事件不会自动绑定除非您使用事件委派，否则请使用这些新元素。

您可以使用例如：

轻松更改它

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

请注意，此处必须在页面加载时显示.form-content元素。如果不是，您还可以使用以下内容：

// 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();
});

从PHP调用的jQuery代码将无法执行

1 个答案: