How to get click eventargs when setting onclick from server-side?

Question

I'm trying to open a div like a popup, but having it centered at the spot where the mouse was when it triggered the onclick event. In order to get the mouse position, I've been following this example

http://docs.jquery.com/Tutorials:Mouse_Position

jQuery(document).ready(function(){
   $("#special").click(function(e){
      $('#status2').html(e.pageX +', '+ e.pageY);
   }); 
})

in that example, the click function is set client-side. However, in my scenario, I am going to set the onclick function server-side to many dynamically created objects. I will also be adding an argument to my function that will be unique to each object created.

The problem I'm facing is that I can't seem to get the eventargs ("e") when I set the onclick event NOT using JQuery.

Ultimately, a simplified example of what I'm trying to achieve would look something like this:

<div id="divSubscription" style="display: none; height: 0px; width: 0px; position: absolute;">some content</div>     
<input type="button" id="btnOpenPopup" value="Open" onclick='openPopup(8, e)' />

    function openPopup(subID, e) {
        var x = e.pageX;
        var y = e.pageY;
        $("#divSubscription").css("top", y);
        $("#divSubscription").css("left", x);
        $("#divSubscription").css("display", "block");
        $("#divSubscription").animate({ height: "400px", width: "400px" }, 300, "swing");

        $("#divSubscriptionContent").html(subID);
    }

Obviously, this doesn't work, because it has no idea what "e" is. Is there any way to accomplish what I'm trying to do?

score 1 · Accepted Answer · answered Mar 07 '13 at 23:09

1

Use class names instead of ids and a data-id attribute to store button specific data (i.e. subID):

CSS:

jQuery(document).ready(function(){
   $(".special").click(function(e){
      var subID = $(this).attr('data-id'); 
      $("#divSubscriptionContent").html(subID);
   }); 
})

HTML:

<div id="divSubscription">some content</div>
<input class="special" data-id="8" type="button" id="btnOpenPopup" value="Open" />

answered Mar 07 '13 at 23:09

Steve

8,609
6
40
54

what about the other argument I need to assign? In this case, the subscriptionID edit: that looks promising. thank you – matthew_360 Mar 07 '13 at 23:10
just edited my answer to include the subscription ID to the button (as `data-id`) – Steve Mar 07 '13 at 23:15
awesome, works perfectly. I had thought about doing it by class, but I was unaware of the data-id attribute. Thanks again! – matthew_360 Mar 07 '13 at 23:22
To be a little bit clearer, naming it `data-id` is just one possibility. Technically you could name it `data-sub-id` or anything else that starts with `data-` – Steve Mar 07 '13 at 23:25
apparently it doesn't even need to start with "data-" i just tried naming the attribute "asdfasdfasdf" and it worked! Good to know! – matthew_360 Mar 07 '13 at 23:44
That is correct, but not recommended. the `data-` attribute was introduced to allow for custom attributes, without interfering with other attributes. – Steve Mar 07 '13 at 23:46

score -1 · Answer 2 · answered Mar 07 '13 at 23:09

Try using delegated events, where #BUTTON_ANCESTOR is the element that contains your buttons:

 jQuery(document).ready(function(){
      $("#BUTTON_ANCESTOR").on('click', 'input[type=button]', (function(e){
           $('#status2').html(e.pageX +', '+ e.pageY);
      }); 
 })

score -1 · Answer 3 · answered Mar 07 '13 at 23:14

Personally, I think you should remove the onclick and use jquery or some similar framework to attach a click handler and listen for the event.

Simply, with jQuery

$('#btnOpenPopup').bind('click', {foo:bar}, openPopup(e));

Do this in your bootstrap, or initialization process, and get out of the habit of putting your javascript in the html files. IMHO, you should only ever need one script include.

How to get click eventargs when setting onclick from server-side?

3 Answers3