jQuery - onclick: Why does it execute click right on adding handler?

Question

Question:

I'm having a little trouble with jQuery: Consider this HTML, where I want to left-click on "https", change it's value and then click ok. On OK, it should remove the textbox, and re-attach the onclick handler. This is does, but onclick is already issued by the current click...

Why ? And how to do this correctly ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Tabelle editieren</title>
    <!--
    <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
    -->
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js"></script>  

    <style type="text/css" media="all">
        html {margin: 0px; padding: 0px; height: 100%;}
        body {margin: 0px; padding: 0px; height: 100%;}
        input{margin: 0px; padding: 0px; }

        tr:nth-child(2n+1) {background-color: #F0F0F0;}
        tr:nth-child(2n)   {background-color: #FEFEFE;}

        td
        {
            margin: 0px; padding: 0.5cm; padding: 0px; text-align: left; 
        }


    </style>

    <script type="text/javascript" language="javascript">

        function hello(me) {
            //alert("hello");
            var str = $(me).text();
            //alert(str);
            $(me).html("<input id=\"my1\" type=\"text\" style=\"width: 198px; height: 100%;\" value=\"" + str + "\" /><input id=\"my1confirm\" type=\"button\" onclick=\"bye(this);\"style=\"width: 35px;\" value=\"" + "OK" + "\" />");
            $(me).attr('onclick', '').unbind('click');

            return false;
        }


        function bye(me) {
            var objTR = $(me).parent();

            //var tb = $(me).closest('table');
            var tb = objTR.find('input');
            var str = tb.val();
            tb.remove();

            objTR.text(str);
            alert("TODO: sending change event with { id : \"" + objTR.attr('id') + "\", str : \"" + str + "\" } to server");


            /*
            objTR.click(function () {
                alert("hi");
                return false;
            });
            */


            objTR.attr('onclick', '').bind("click", function (e) {
                e.preventDefault();
                alert("it shouldn't  execute this in this click, but it does... ");
                //hello(this);
                //event.stopImmediatePropagation();
            });

            return false;
        }


        $(document).ready(function () {
            //$('#myDataTable').dataTable().makeEditable();

        });
    </script>

</head>
<body style="margin: 0.5cm;">
    <h1>Application configuration</h1>
    <!--

    -->
    <table border="1" style="border-collapse: collapse;" >
      <thead>
        <tr style="background-color: Black; color:White; font-weight: bold; text-transform: capitalize;">
          <th style="width: 235px; text-align: left;">key</th>
          <th style="width: 235px; text-align: left;">value</th>
        </tr>
      </thead>
      <tfoot>
        <tr style="background-color: Black; color:White; font-weight: bold; text-transform: capitalize;">
          <th style="text-align: left;">key</th>
          <th style="text-align: left;">value</th>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Environment</td>
          <td id="server">testing</td>
        </tr>

        <tr>
          <td>Protocol</td>
          <td id="Protocol" onclick="hello(this);">https</td>
        </tr>

        <tr>
          <td>UserHashMode</td>
          <td id="UserHashMode">true</td>
        </tr>

        <tr>
          <td>Logo</td>
          <td id="Logo">LogoFileCustomerN.png</td>
        </tr>

      </tbody>
    </table>
</body>
</html>

Have you already tried the methods .on() or .delegated()? I cannot provide any tries, because I'm sitting not on my computer. — Reporter, Jun 27 '12 at 20:00
Given you're using jQuery 1.7.1, try using [`.prop()`](http://api.jquery.com/prop/) or [`.removeProp()`](http://api.jquery.com/removeProp/) rather than `.attr()`. Removing or resetting an attribute doesn't necessarily mean the related property value will be changed. — Jonathan Lonowski, Jun 27 '12 at 20:06
@reporter: On works so far, but now I can't get it off anymore, lol ;) — Stefan Steiger, Jun 27 '12 at 20:32

score 1 · Accepted Answer · edited May 23 '17 at 11:56

1

It seems that inline event handlers cannot be unbound by jQuery: Unbinding inline onClick not working in jQuery?

So I'm not sure if it'll work, but instead of using:

.attr("onclick", "")

try:

.removeAttr("onclick")

Let us know if that changes anything.

UPDATE:

I made a jsFiddle to show you how it could function "easier": http://jsfiddle.net/S2ARR/3/

A lot of it depends on certain things, such as using my structure - putting a span inside of the column instead of using the column for everything. I didn't use the id of elements for jQuery selecting because I wasn't sure why you weren't - if you set the id of elements and you need to access them, you might as well use the id selector in jQuery. So you wouldn't need to use .parent() or .find() in my example if you just used the id. Hopefully this is what you were looking for. I think the important thing was the .stopPropagation() call, otherwise it didn't seem to work.

edited May 23 '17 at 11:56

Community

1
1

answered Jun 27 '12 at 20:11

Ian

50,146
13
101
111

Just updated and gave a small example of what you're looking for, modifying your code a little. It seems to work for me! – Ian Jun 27 '12 at 20:44
Yep, .stopPropagation() is the real magic. PS: It seems to work fine with td instead of span. Yours is invalid HTML. – Stefan Steiger Jun 27 '12 at 23:27
It's up to you whether you want to bind to the whole or a . How is my HTML invalid? – Ian Jun 28 '12 at 14:26

KoU_warch · Answer 2 · 2012-06-27T23:28:31.637

1

i changed your event to delegate, removed onclick from the table and called it using jquery. However i'm not sure if what i get is your desire behavior.

jsfiddle

Update

Hi, i updated with the desired behavior.

Solution

edited Jun 27 '12 at 23:28

answered Jun 27 '12 at 20:39

KoU_warch

2,160
1
25
46

@Quandary ups, sorry i made it work anyway! hope to be at least a little bit of help – KoU_warch Jun 27 '12 at 23:32

score 0 · Answer 3 · answered Jun 27 '12 at 19:59

0

Instead of binding the event via the onclick attribute, you can bind it to the table cell with jquery.

$(function(){
    $("#Protocol").click(function(){ 
       // your content
    });
});

Then, you can guarantee that you can unbind the event with unbind later on.

answered Jun 27 '12 at 19:59

Thinking Sites

3,494
17
30

i already tried that, it doesn't make a difference... unbind works btw, the problem is when I try to re-bind. – Stefan Steiger Jun 27 '12 at 20:01
Your basic problem is that it's not unbinding, yes? I had a hard time reading your description. – Thinking Sites Jun 27 '12 at 20:26
No, it's unbinding properly. Rebinding is the problem. As soon as I rebind, I get the click event executed without having clicked... – Stefan Steiger Jun 27 '12 at 20:31
OH!, I see. Let me look at this and get back to you. – Thinking Sites Jun 27 '12 at 20:34

jQuery - onclick: Why does it execute click right on adding handler?

3 Answers3