Object [object Object] has no method 'live'

Question

these are my js files of my project:

tablequerywrapper.js
gauge.min.js
Functions.js
colortip-1.0-jquery.js 
ObjectivesFunctions.js
jquery.bxslider.js

in: Functions.js, I have:

$('li div[id^="objective_option_conversion_points_"]').click(function () {
  alert('3');
}

$('#sortedPixels tbody').sortable({
    items: '> tr',
    forcePlaceholderSize: true,
    placeholder: 'must-have-class',
    start: function (event, ui) {
        // Build a placeholder cell that spans all the cells in the row
        var cellCount = 0;
        $('td, th', ui.helper).each(function () {
            // For each TD or TH try and get it's colspan attribute, and add that or 1 to the total
            var colspan = 1;
            var colspanAttr = $(this).attr('colspan');
            if (colspanAttr > 1) {
                colspan = colspanAttr;
            }
            cellCount += colspan;
        });

        // Add the placeholder UI - note that this is the item's content, so TD rather thanTR
        ui.placeholder.html('<td colspan="' + cellCount + '">&nbsp;</td>');
    }
}).disableSelection();

I ran it and got:

Uncaught TypeError: Object #<Object> has no method 'sortable'

I read that this error is because I need JQUERY UI, so I added:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

and the error is gone. but when I pressed a div that has an id = "objective_option_conversion_points_1", nothing is happened.

so I tried:

$('li div[id^="objective_option_conversion_points_"]').on('click', function () {
    alert('3');
}

but nothing is happened.

so I tried:

$('li div[id^="objective_option_conversion_points_"]').live('click', function () {
    alert('3');
}

but then I got another error:

Uncaught TypeError: Object [object Object] has no method 'live'

how can I solve it please?

p.s.

in my jsfiddle, it works:

http://jsfiddle.net/alonshmiel/adpFV/7/

any help appreciated!

Are you adding `objective_option_conversion_points_` dynamically if so use event delegation... — PSL, Sep 20 '13 at 19:09
jQuery's `live()` is deprecated. http://api.jquery.com/live/ — Julio, Sep 20 '13 at 19:09
I didn't add objective_option_conversion_points_ dynamiccaly. these divs exist in my page. — Alon Shmiel, Sep 20 '13 at 19:17
how can this topic be duplicate if I tried what they suggested the other topic and it doesn't work?? — Alon Shmiel, Sep 20 '13 at 19:22

score 2 · Accepted Answer · answered Sep 20 '13 at 19:08

2

live() is deprecated, and in your jQuery version likely already removed.

You can use delegates for this purpose.

But the selector is just hurting my eyes. Why didn't you use # there?

$('#objective_option_conversion_points_').on('click', function(){
    alert('3');
});

answered Sep 20 '13 at 19:08

MightyPork

18,270
10
79
133

thank you but it doesn't work :/ – Alon Shmiel Sep 20 '13 at 19:16
@AlonShmiel Is the content within the `li` dynamically generated? – War10ck Sep 20 '13 at 19:28

score 1 · Answer 2 · answered Sep 20 '13 at 19:11

1

Using on() is the correct way to go about things:

$( 'li' ).on( 'click', 'div[id^="objective ... "]', function () {
    // do something.
}

I am not too sure on the syntax to select the div, but the second parameter will will listen for any div[id^="obj ... "] that are created.

answered Sep 20 '13 at 19:11

Phil

10,948
17
69
101

are you sure you can delegate to `li`? `li`s seem quite susceptible to dynamic addition to me. – John Dvorak Sep 20 '13 at 19:12
well, this is just a conceptual answer, obviously binding anything on all `li` in a page is silly. – Phil Sep 20 '13 at 19:13
thank you but it doesn't work :/ – Alon Shmiel Sep 20 '13 at 19:14
@AlonShmiel try bindning to `document` istead of `li`. – John Dvorak Sep 20 '13 at 19:15
what does it mean? sorry, I didn't understand.. – Alon Shmiel Sep 20 '13 at 19:15
I tried: .bind("click",function(){ and it doesn't work.. – Alon Shmiel Sep 20 '13 at 19:20

Object [object Object] has no method 'live'

2 Answers2