Javascript - Need to handle click event of dynamic element

irishdude11 · 28-09-2011 11:27pm #1

I need to handle the click event when a user clicks on a button on a webpage. The problem is the button appears dynamically when the user interacts with the web app so I cant just override the onclick event of this button as it doesn't exist when the page initially loads.

So any ideas on how to find out when this button was clicked and handle it?

Just to add before someone says to add click handling code when the button is placed on the page - I cant do that as its not my web page - im using selenium to interact with web pages from a c# application.

Webmonkey · 29-09-2011 9:56am

Has the button an ID? what about putting an OnClick handler to the body of the page and then when the click events occur, check the event senders ID and if it's the button do something?

Not sure how much flexibility you got.

johnny_rambo · 29-09-2011 10:40am

If you're using jQuery, just use the live function. Example.....

$(function() {
    $("input:button").live("click", function() {
        alert("Alert for all button clicks");
    });
});

If you use that code, a click event for all buttons on the page will be fired regardless of when the button was created.

If you're not using jQuery, just mimic what the jQuery live function does; bind an event listener to the document element and check all events that bubble up to the document element.

johnny_rambo · 29-09-2011 10:44am

Webmonkey wrote: »

Has the button an ID? what about putting an OnClick handler to the body of the page and then when the click events occur, check the event senders ID and if it's the button do something?

Not sure how much flexibility you got.

I don't think this will work because the click event fired will only have data on the click of the body element.
You won't know what part of the body element you clicked on, unless you go comparing the position of the click versus the position of the new input button.

Webmonkey · 29-09-2011 10:55am

johnny_rambo wrote: »

I don't think this will work because the click event fired will only have data on the click of the body element.
You won't know what part of the body element you clicked on, unless you go comparing the position of the click versus the position of the new input button.

Maybe not

- I'm just thinking you can get the element clicked upon from the event var if it's within the body and if this is the button then you know you've clicked the button.

Maybe this:

<html>
<head>
<title>x</title>
<script type="text/javascript">
function CheckButton(e){
    var eventTarget = e.target ? e.target : e.srcElement;
    if (eventTarget.id == "mybutton")
      alert('hi');
}

</script>
</head>
<body OnClick="CheckButton(event)";>
<input type="button" value="hi" id="mybutton" />
</body>
</html>

johnny_rambo · 29-09-2011 11:09am

Webmonkey wrote: »
Maybe not - I'm just thinking you can get the element clicked upon from the event var if it's within the body and if this is the button then you know you've clicked the button.

Maybe this:
<html>
<head>
<title>x</title>
<script type="text/javascript">
function CheckButton(e){
    var eventTarget = e.target ? e.target : e.srcElement;
    if (eventTarget.id == "mybutton")
      alert('hi');
}

</script>
</head>
<body OnClick="CheckButton(event)";>
<input type="button" value="hi" id="mybutton" />
</body>
</html>

Yeah that should work. Sorry got mixed up!

Still think the live function in jQuery is the least painful way to go if the OP is using jQuery.

Webmonkey · 29-09-2011 11:10am

johnny_rambo wrote: »

Sorry but that still won't work because the target of that click event will be the body element and not the button, even if you click on the button. Clicking anywhere on the page will still give the target of that click event as being the body.

OP, try using the live function in jQuery.....it's the least painful way to go.

I don't think so. I know everything will send an on click event but it's only the one in the body you handle then by the ID check.

He might not be able to add in JQuery libs if it's not his site. Don't even know if he can add in what I'm proposing. If JQuery is already part of the app then your solution would be better.

Javascript - Need to handle click event of dynamic element

Comments