Ajax生成的内容需要双击才能触发单击jQuery

Question

On my view (ajax generated):

<a data-name="notes" href="#" data-type="text" data-pk="{!! $v->id !!}" class="vpUpdate">{{ $v->notes}}</a>

On my jQuery:

$(document).on('click', '.vpUpdate', function (e) {
    $.fn.editable.defaults.mode = 'popup';
    $('.vpUpdate').editable({
        type: 'text',
        url:'edit-notes',   
        title: 'Edit Notes',
        placement: 'top', 
        send:'always',
        ajaxOptions: {
            dataType: 'json'
        }
    });
});

Now this works an all but only if I click it twice then the jQuery triggers.

I did not have this issue before with using only:

$(document).ready(function(){

However this method won't work if the content was ajax generated.

Also, let's say I have multiple links on the page that uses the same .vpUpdate class as the trigger, if I double click on any of them once, any future clicks will only require a single click from then on. If I refresh the page this whole cycle happens again.

Now I was just wondering how I can get it to trigger the jQuery immediately on first click instead of double clicking.

Thanks.

Answer 1

You have to wrap the assignment of eventhandlers inside a $(document).ready function or a $(window).load function. You are attaching the click event to the document object before the document object actually exists.

$(document).ready(function(){
    $(document).on('click', '.vpUpdate', function (e) {
        $.fn.editable.defaults.mode = 'popup';
        $('.vpUpdate').editable({
            type: 'text',
            url:'edit-notes',   
            title: 'Edit Notes',
            placement: 'top', 
            send:'always',
            ajaxOptions: {
                dataType: 'json'
            }
        });
    });
});