CODEWITHSUNDEEP
javascriptjquery
Jaido
Jaido

Reputation: 188

I upgraded my jQuery to 1.9.1, but I have issues with a script

I have tried to edit this script to soothe with the jQuery 1.9.1 standard but it still not working. My code is below

$(document).on('each', 'a.delete', function(index, element) {
    $(element).click(function() {
        alert('here');
    });
});

It just does not work with no errors in console. But I had it working on 1.3.2 version if I remove the on method.

Upvotes: 1

Views: 83

Answers (5)

Irvin Dominin
Irvin Dominin

Reputation: 30993

There aren't syntax errors, but your code not works because each is not a valid event to be handled from a function; so it will be never fired.

You can use jQuery on:

Attach an event handler function for one or more events to the selected elements.

and attach a click handler to all the matched elements.

Code:

$('a.delete').on('click',function() {
    alert('here');
});

Demo: http://jsfiddle.net/IrvinDominin/67DNx/

Or if your elements are dynamically added you can use event delegation:

The majority of browser events bubble, or propagate, from the deepest, innermost element (the event target) in the document where they occur all the way up to the body and the document element. In Internet Explorer 8 and lower, a few events such as change and submit do not natively bubble but jQuery patches these to bubble and create consistent cross-browser behavior.

If selector is omitted or is null, the event handler is referred to as direct or directly-bound. The handler is called every time an event occurs on the selected elements, whether it occurs directly on the element or bubbles from a descendant (inner) element.

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

Code:

$(document).on('click', 'a.delete', function () {
    alert('here');
});

Demo: http://jsfiddle.net/IrvinDominin/67DNx/1/

Upvotes: 0

Jaido
Jaido

Reputation: 188

Finally I have been able to solve this. in a very simple way. Though I got ideas from some post which were not really perfect for me.

$(document).on('click','a.delete',function() {
             alert('here');
});

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115212

Try this

$('a.delete').each(function(index, element) {
    $(element).click(function() {
        alert('here');
    });
});

For simplifying your code 

$('a.delete').on('click',function() {
     alert('here');
});

If they are creating dynamically then try

$(document).on('click','a.delete',function() {
     alert('here');
});

Upvotes: 3

dcodesmith
dcodesmith

Reputation: 9614

No need to loop through all the anchor tags, you could just use event delegation by targeting the class of the anchor tag as shown below. This is more efficient, less code and best practise.

$('a').on('click','.delete', function() {
    alert('here');
});

Upvotes: 1

giordanolima
giordanolima

Reputation: 1218

Try this:

$(document).ready(function(){
    $("a.delete").click(function(){
        alert("here");
    });
)};

Upvotes: 0

Related Questions