Question

i have this jsfiddle
http://jsfiddle.net/DgauY/1/
which adds two items when the element is dropped in the Content area. One a X element to remove the dropped element and the other Properties Link. What i want to achieve is to open different dialog forms on clicking on the respective Properties link which has a class based on the element which it contains.
like i i dropped a text box then looking at the properties class which is txtbox when i click on the properties i should have a dialog form which contains options related to text box like label etc…
i hope i am not confusing…

Answer 1

It’s very hard to figure out what you’re asking. It sounds as though you’re asking how to respond to clicks on different “properties” links with different classes by opening different dialog boxes. That would be trivial: Just hook the click event on the relevant “properties” links using bind (click), delegate, or live:

$("a.type1").click(function() {
    // Open the dialog for type1
    // ...

    // Prevent the default action of the link
    return false;
});
$("a.type2").click(function() {
    // Open the dialog for type2
    // ...

    // Prevent the default action of the link
});

(And again, you might use delegate or live rather than binding the event on the elements themselves, if this is dynamic at all.)

Or if you want to use a common handler for all the types and branch within the handler, you could do that:

$("a.type1, a.type2, a.type3").click(function() {
    // ...code all of them have in common...
    // ...

    // Branch on what class(es) the link has and open the relevant dialog
    // ...

    // ...more code all of them have in common...
    // ...

    // Prevent the default action of the link
    return false;
});

You can use multiple classes (so each link has both “props” and “type1” or “type2”, etc.)

If you mean that the links won’t actually have different types, but you want to branch on what’s in the same container they are or something, you can use closest to go up to the container you want, then find and/or children to find out what’s in the container:

$("a.props").click(function() {
    var container = $(this).closest('div'); // If the container is a div
    if (container.find("textarea")[0]) {
        // It has at least one text area, show dialog...
    }
    else if (container.find("input[type=text]")[0]) {
        // It has at least one text input, show dialog...
    }
    else if (container.find("input[type=button]")[0]) {
        // It has at least one `input`-style button, show dialog...
    }
    // else etc.

    // Prevent the default action of the link
    return false;
});