jquery click not working in google chrome

Question

hi i'm new to jquery i am working in jquery to load some html code on clicking add more button. i have done this using click event but its not working in google chrome and working fine in firefox. please guide me if some one having the same issue. here is my jquery code

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

here is the 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>

any help please...

Answer 1

Steps to Debug

1.Check the Program Console for any javascript errors

2.Check your jQuery version

3.If jQuery version is greater than 1.7 live will be a deprecated one replace it with on function.

4.Bind your events inside body like

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

Any way this will fix your error in Chrome replace this 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());
    });
});