Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

Javascript - Need to handle click event of dynamic element

  • 28-09-2011 10:27pm
    #1
    Registered Users, Registered Users 2 Posts: 377 ✭✭


    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.


Comments

  • Registered Users, Registered Users 2 Posts: 9,579 ✭✭✭Webmonkey


    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.


  • Registered Users, Registered Users 2 Posts: 128 ✭✭johnny_rambo


    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.


  • Registered Users, Registered Users 2 Posts: 128 ✭✭johnny_rambo


    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.


  • Registered Users, Registered Users 2 Posts: 9,579 ✭✭✭Webmonkey


    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>
    


  • Registered Users, Registered Users 2 Posts: 128 ✭✭johnny_rambo


    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.


  • Advertisement
  • Registered Users, Registered Users 2 Posts: 9,579 ✭✭✭Webmonkey


    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.


Advertisement