jquery click 在谷歌浏览器中不起作用

Question

嗨，我是 jquery 的新手，我在 jquery 中工作以在单击添加更多按钮时加载一些 html 代码。我已经使用点击事件完成了此操作，但它无法在 google chrome 中运行，并且在 Firefox 中运行良好。 如果有人遇到同样的问题，请指导我。 这是我的jQuery代码

 <script type="text/javascript">
    $(document).ready(function() {     
    var counter = 0;
    var i=1;
    $('#add_job_link').on('click', function(){
        var content = $('#multi_job_example').html();
        counter++;
        content = content.replace(/__NUM__/g, this.properties.counter);
        $('#more_job_list').append('<li class="'+counter+'">'+content+'</li>');

        $('li div#cke_desc').remove();
        $('li.'+counter+' textarea.desc').attr('id', 'desc_'+i );
        CKEDITOR.replace( 'desc_'+i );
        i++;
        return false;
    });

    $('#more_job_list a.delete_job').live('click', function(){
        $(this).parent().parent().parent().remove();
        return false;
    });
    $('#more_job_list').live('keyup', function(){
        $(this).parent().parent().parent().parent().find('.a-header .text').html($('<div/>').text($(this).val()).html());
    });
</script>

这里是html

<div class="cont">  
    <div class="hid" id="multi_job_example">
        <div class="a-header">
            <div class="fright"><a href="#" class="delete_job">Remove job</a></div>
            <div class="slide"><ins class="i-o"></ins></div>
            <div class="text"></div>
        </div>

        <div class="a-block my-form" id="input1">
            <div class="form-group">
                <label class="col-sm-3 control-label">Email Address:</label>
                <div class="col-sm-5"><input type="text" name="ind_email[]" value="" id="email1" class="form-control"/></div>
            </div>

            <div class="form-group">
                <label class="col-lg-3 control-label">Job Description: </label>
                <div class="col-lg-7 txt">
                    <textarea class="desc" name="fe_description[]" id="desc"></textarea>
                </div>
            </div>

            <div class="form-group" id="div_cities">
                <label class="col-sm-3 control-label">City:</label>
                <div class="col-sm-5">
                    <select id="f_city" name="id_city[]" id="f_city_label" class="f_cityClass form-control"> 
                        <option value=""></option>
                    </select>
                </div>
            </div>


        </div>
    </div>
    <ul id="more_job_list" class="a-list">
    </ul>


    <div class="b">
        <a href="#" id="add_job_link" class="btn-link"><ins class="with-icon i-list-add"></ins>Add more job</a>
    </div>
</div>

请帮忙...

Answer 1

调试步骤

1.检查程序控制台是否有任何 javascript 错误

2.检查你的 jQuery 版本

3.如果 jQuery 版本大于 1.7，live 将被弃用，将其替换为 on 函数。

4.将你的事件绑定在body里面

 $('body').on('keyup', '#more_job_list',function(){
        $(this).parent().parent().parent().parent().find('.a-header .text').html($('<div/>').text($(this).val()).html());
    });

这将解决您在 Chrome 中的错误替换此 jquery 的任何方式

$(document).ready(function () {
    var counter = 0;
    var i = 1;
    $('#add_job_link').on('click', function () {
        var content = $('#multi_job_example').html();
        counter++;
        content = content.replace(/__NUM__/g, $(this).attr('counter'));
        $('#more_job_list').append('<li class="' + counter + '">' + content + '</li>');

        $('li div#cke_desc').remove();
        $('li.' + counter + ' textarea.desc').attr('id', 'desc_' + i);
        CKEDITOR.replace('desc_' + i);
        i++;
        return false;
    });

    $('#more_job_list a.delete_job').live('click', function () {
        $(this).parent().parent().parent().remove();
        return false;
    });
    $('#more_job_list').live('keyup', function () {
        $(this).parent().parent().parent().parent().find('.a-header .text').html($('<div/>').text($(this).val()).html());
    });
});