To trigger everytime with .click()?

Question

I tried to have a .click() on a <a> to find out it wont trigger every time I click, what it suppose to do is open a dialog.

That is not the only problem I would need to pass a value to my jquery to. I just cant figure this one out.

I need it to be a <a> because it's gone be in a dropdown menu. Do you got any suggestions?

EDIT this is the code I use and it workes

$(document).ready(function() {
        $('#dialog').dialog({ autoOpen: false, bgiframe: true, modal: true, height: 600, width: 1000, Close: function() { $(this).dialog('destroy'); } });

        $('a').live('click', function(evt) {
            evt.preventDefault();
            var ids = $(this).attr('id');
            var first = "<iframe style='width: 100%; height: 100%;' src='" + "" + "'</iframe>'";
            $('.iframe').html(ids);

            $('#dialog').dialog('open');
        });
    });

This code intilise the dialog, open on every click and it work every time, trick for me here was the 'destroy' at the end and the inilise

thanks guys for your help

Answer 1

This will trigger on every click. Whilst I doubt this will be the case, check you haven't got any other event handlers listening on the 'a', that are applying event.stopImmediatePropagation(). Try adding a return false to the end of the click handler, or even better:

$('a').click(function(evt) {
        var first = "<iframe style='width: 100%; height: 100%;' src='" + need to put value here + "'</iframe>'";
        $('.iframe').html(first);
        $('#dialog').dialog({ bgiframe: true, modal: true, height: 600, width: 1000 });

        evt.preventDefault();
    });

You might find that the page is reloading if you're not preventing the default action of the anchor tag, which would give the impression nothing is happening.

What sort of "value" are you thinking of? You can use jQuery's data() to store information, and of course you have access to all global variables in that scope.

EDIT: To answer your comment, you can retrieve the ID of the a inside the click event as follows:

var theIdOfTheA = $(this).attr('id');

Note that this must be placed inside the handler.

EDIT2:

$('a').live('click', function(evt) {
        var first = "<iframe style='width: 100%; height: 100%;' src='" + $(this).attr('id') + "'</iframe>'";
        $('.iframe').html(first);
        $('#dialog').dialog({ bgiframe: true, modal: true, height: 600, width: 1000 });

        evt.preventDefault();
    });

Answer 2

You can pass data into an event handler by doing the following (from jQuery docs):

$('#foo').bind('custom', function(event, param1, param2) {
  alert(param1 + "\n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);

So you could do this:

$(document).ready(function() {
    $('a').bind("click", function(event, myValue) {
        var first = "<iframe style='width: 100%; height: 100%;' src='" + myValue + "'</iframe>'";
        $('.iframe').html(first);
        $('#dialog').dialog({ bgiframe: true, modal: true, height: 600, width: 1000 });
    });
});

Note that you are now using bind() to bind the event handler, and the function is receiving a value (name it whatever you want). To show google in the iframe:

$('a').trigger('click', ['http://www.google.com']);

Answer 3

DEMO: http://jsbin.com/olalu/edit

make sure you close the dialog before open it again!

<a href='javascript:;' id='my_unique_id' >click</a>

EDITED

$('a').click(function(evt) {
    evt.preventDefault();

    var theIdOfTheA = this.id;

    var first = "<iframe style='width: 100%; height: 100%;' src='" + 
                "http://www.sf.se" + "'</iframe>'";
      $('.iframe').html(theIdOfTheA);
       $('#dialog').dialog({  
       bgiframe: true, 
       modal: true, 
       height: 600, 
       width: 1000, 
       //this
       Close: function() { $(this).dialog('close'); },
       //OR this OR both
       Cancel: function() { $(this).dialog('close'); }
    });
 });