jquery: disable click function on ui dialog

Question

$(top.document).ready(function () {   

   $("*").click(processAction);



function processAction(e){
    var clicked = e.target;
    e.stopPropagation();
    alert(clicked.tagName);
    e.stopPropagation();

    switch(clicked.tagName)
    {
        case "A":
            newDialog("You've clicked on a link !", "Please Choose An Action <br> 1<br>3");         
            return false; // prevent the default action, e.g., following a link
        break;

        case "INPUT":
            newDialog("You've clicked on a form !", "Please Choose An Action <br> 1<br>3");         
            return false;
        break;

        case "IMG":
            newDialog("You've clicked on a picture !", "Please Choose An Action <br> 1<br>3");          
            return false;
        break;

        case "BUTTON":
            newDialog("You've clicked on a button !", "Please Choose An Action <br> 1<br>3");           
            return false;
        break;

        default:
            newDialog("You've clicked on a text !", "Please Choose An Action <br> 1<br>3");         
            return false;
    }
};

function newDialog(mytitle, mycontent){
   var $dialog = $('<div></div>')
        .html(mycontent)
        .dialog({
            autoOpen: false,
            open: function() {$("*").unbind('click', processAction);},
            close: function() {$("*").bind('click', processAction);},
            title: mytitle,
            buttons: { "Cancel": function() { $(this).dialog("close"); } 
                     } 
        });
    $dialog.dialog('open');

}

I tried setting open and close events to bind and unbind the click, processAction() function, however, it doesn't seem to be working as planned.

Answer 1

use

e.preventDefault();

API

http://api.jquery.com/event.preventDefault/

example

function newDialog(mytitle, mycontent){
   var $dialog = $('<div id="something"></div>')
        .html(mycontent)
        .dialog({
            autoOpen: false,
            open: function() {$("*").unbind('click', processAction);},
            close: function() {$("*").bind('click', processAction);},
            title: mytitle,
            buttons: { "Cancel": function() { $(this).dialog("close"); } 
                     } 
        });
    $dialog.dialog('open');

}

$(#something a').live('click', function(e){ e.preventDefault(); });

Answer 2

Don't ever do something like $("*").click(processAction);. It's extremely inefficient plus it basically traps every click event, which is why it's causing problems with your dialog too.

A better way is to have all the content you're interested in within a certain container, and select all elements inside that container. It's still not a very good thing to do, which begs the question: what are you trying to do? Maybe there's a better way to do whatever you're currently trying to do.