Jquery Live function not working in Firefox

Question

My script Code

$(function () {
    $(".ui-button-text").live("click", function () {
        var buttonName = $(this).text();
        if (buttonName == 'Continue') {
            $("#runloGc").prop("disabled", true);
        }
    });
});

Html code

  <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Cancel</span></button>

This has been asked a millions times. [`.live`](http://api.jquery.com/live/) has beed REMOVED in jQuery 1.9. — Corneliu, Jun 05 '13 at 13:24
It probably is "not working" because you are attaching to the click event of a span _inside_ a button, and the button click event is likely what gets fired/captured. — Tim Hobbs, Jun 05 '13 at 13:35

GautamD31 · Answer 1 · 2013-06-05T13:29:08.997

0

The .live() function is deprecated, try using .on():

$(function(){
    $(".ui-button-text").on("click",function(){
        var buttonName=$(this).text();
         if(buttonName == 'Continue'){
             $("#runloGc").prop("disabled",true);
         } 
     });
});

Or try like

$(function(){
    $("input[type='button']").on("click",".ui-button-text",function(){
        var buttonName=$(this).text();
         if(buttonName == 'Continue'){
             $("#runloGc").prop("disabled",true);
         } 
     });
});

edited Jun 05 '13 at 13:29

answered Jun 05 '13 at 13:21

GautamD31

28,552
10
64
85

.on() not working in chrome as well..!! – jsduniya Jun 05 '13 at 13:26
1

Should be something like `$("body").on("click", ".ui-button-text", function(){` or at least `$("div").on("click", ".ui-button-text", function(){` – Shadow The GPT Wizard Jun 05 '13 at 13:27
@ShadowWizard Now I have added it too – GautamD31 Jun 05 '13 at 13:29
you can also replace `$("input[type='button']")` with `$(document)`. – Omar Jun 05 '13 at 13:31
@Omar I will obey with you....we can give any of document,body,div,button,input,....blah blah – GautamD31 Jun 05 '13 at 13:32
@Omar - that sort of defeats the purpose of `on` though, since now you are making it look through the entire DOM structure anyway - "jQuery bubbles the event from the event target up to the element where the handler is attached". – Tim Hobbs Jun 05 '13 at 13:33
sorry guys not working above things as well..!! i added my html code..! – jsduniya Jun 05 '13 at 13:35

score 0 · Answer 2 · answered Jun 05 '13 at 13:31

You should use the following:

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#container').on('click', '.ui-button-text', function(event) {
    event.preventDefault();
    alert('testlink'); 
});

This will attach your event to any anchors within the #container element, reducing the scope of having to check the whole document element tree and increasing efficiency.

This is the best case scenario. If you are not sure about the container element, you can use the document then like:

$(document).on('click', '.ui-button-text', function(event) {

FIDDLE DEMO

score 0 · Accepted Answer · answered Jun 05 '13 at 13:43

0

As per your updated code, you should bind the event to the button not the span.

Demo

$(document).on('click', 'button.ui-button', function () {
 // code
});

answered Jun 05 '13 at 13:43

Omar

32,302
9
69
112

No Omar not working this to, $(".ui-button").on("click",function(){ }); working in chrome not in firefox – jsduniya Jun 05 '13 at 13:47
`$(document).on('click', 'button.ui-button', function () {` tested on firefox latest version 21.0. @SiddeshBhalke – Omar Jun 05 '13 at 13:49
@SiddeshBhalke welcome, glad to assist :) – Omar Jun 05 '13 at 13:53

Jquery Live function not working in Firefox

3 Answers3