jQuery不能与underscore.js一起使用

Question

我试图在单击上添加输入框。 但是没有下划线的情况很奇怪，它正在工作，意味着正在生成输入框，但是使用underscore.js，它却无法工作。

还测试了alert("testing"); 警报成功发出。

<div class="form-group">
                <div class="col-sm-10">
                    <div id="p_scents1">        
                        <a href="#" id="addScnt1">Add More</a>
                        <% _.each( type.size, function(i, listItem ){ %>
                                 <%= "<p><label for='p_scents1'><input id='TypeSize"+listItem+"' class='form-control' type='text' placeholder='Please enter  Type size' required='required' value='"+i+"' name='data[Type][size]["+listItem+"]'></label></p>" %>
                        <% }); %>
                    </div>
                </div>
            </div>

    <script type="text/javascript">
        $(function() {
            var scntDiv = $('#p_scents1');
            var i = $('#p_scents1 p').size();

            $('#addScnt1').live('click', function() { 
           alert("testing"); //tested . alert is working fine. but append is not working.
                $(scntDiv).append('<p><label for="p_scents1"><input id="TypeSize0" class="form-control" type="text" placeholder="Please enter Type size" required="required" name="data[Type][size]['+i+']"></label> <a href="#" id="remScnt1">Remove</a></p>');
                i++;
                return false;
            });

            $('#remScnt1').live('click', function() {
                if( i > 1 ) {
                    $(this).parents('p').remove();
                    i--;
                }
                return false;
            });
        });
    </script>

Answer 1

由于这两个元素是动态构建的，因此您必须像这样使用委托

 $(document).on('click', '#addScnt1', function () {
    var i = $('#p_scents1 p').size();         
     $(scntDiv).append('<p><label for="p_scents1"><input id="TypeSize0" class="form-control" type="text" placeholder="Please enter Type size" required="required" name="data[Type][size][' + i + ']"></label> <a href="#" id="remScnt1">Remove</a></p>');
     i++;
     return false;
 });

 $(document).on('click', '.remScnt1', function () {
      var i = $('#p_scents1 p').size();         
      if (i > 1) {
         $(this).parents('p').remove();
         i--;
     }
     return false;
 });

编辑

而不是附加所有元素，而是通过逐个添加元素来解决步骤。 首先，您可以尝试这样，

$('#p_scents1').append("<span>test</span>");

然后添加元素并找出导致问题的元素。