Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    javascript function on table row but not on image inside table row

    My issue is that I have a javascript function applied on page load via an addLoadEvent function call in the head to every row (dynamic number of records retrieved) on a table. On every row of the table I also have an element (image or button) that performs a different function that is assigned on the element itself. Unfortunately, when I click the element it also performs the function that was applied to the row in the page load. Is there any way to not call this function on element click? I know usually you include code, but due to the nature of the work I am limited in that respect. Basically its:

    Code:
    <script type="text/javascript">
      addLoadEvent(function() { function1(1); })
      //function1 makes the table rows do something appearance wise.
    </script>
    
    <tr>
      <td></td>
      <td></td>
      <td>
        <img src="pics/delete.png" alt="Delete" onclick="function2();">
      </td>
    </tr>
    I apologize if my post doesn't conform to the general guidelines of proper posting on this board. I'm new on this site.

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by jpavlik View Post
    My issue is that I have a javascript function applied on page load via an addLoadEvent function call in the head to every row (dynamic number of records retrieved) on a table. On every row of the table I also have an element (image or button) that performs a different function that is assigned on the element itself. Unfortunately, when I click the element it also performs the function that was applied to the row in the page load. Is there any way to not call this function on element click? I know usually you include code, but due to the nature of the work I am limited in that respect. Basically its:

    Code:
    <script type="text/javascript">
      addLoadEvent(function() { function1(1); })
      //function1 makes the table rows do something appearance wise.
    </script>
    
    <tr>
      <td></td>
      <td></td>
      <td>
        <img src="pics/delete.png" alt="Delete" onclick="function2();">
      </td>
    </tr>
    I apologize if my post doesn't conform to the general guidelines of proper posting on this board. I'm new on this site.
    Yes, I have a very simple and easy to apply solution,
    but due to the proprietary nature of the work I cannot
    post it here.

  • #3
    New Coder
    Join Date
    Aug 2010
    Location
    FL
    Posts
    35
    Thanks
    0
    Thanked 1 Time in 1 Post
    I'm assuming you are using event listeners for attaching the events? It sounds to me that your events are bubbling down because it seems like a problem with event delegation

  • #4
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the function1(1) is:

    Code:
    function function1(numtables){
    	for (var tablecount=1; tablecount<=numtables;tablecount++)
    	{
    		var table = document.getElementById('rsTableBody' + tablecount);
    		for (var i=0;i<table.rows.length;i++) {
     			if (table.rows[i].className == 'nofunction') { /* Do nothing */ }
    			else { 
    				table.rows[i].onclick= function () {
    					//do stuff
    				}

  • #5
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Any ideas on this?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •