CODEWITHSUNDEEP
javascriptjqueryhtmlxhtmlonclick
Stefan Steiger
Stefan Steiger

Reputation: 82316

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

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>

Upvotes: 2

Views: 874

Answers (3)

KoU_warch
KoU_warch

Reputation: 2150

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

Upvotes: 1

Ian
Ian

Reputation: 50923

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.

Upvotes: 1

Thinking Sites
Thinking Sites

Reputation: 3542

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.

Upvotes: 0

Related Questions