jQuery - onclick: Mengapa ia mengeksekusi klik kanan saat menambahkan handler?

Pertanyaan:

Saya mengalami sedikit masalah dengan jQuery: Pertimbangkan HTML ini, di mana saya ingin klik kiri pada "https", ubah nilainya lalu klik ok. Jika OK, ia akan menghapus kotak teks, dan memasang kembali pengendali onclick. Ini benar, tetapi onclick sudah dikeluarkan oleh klik saat ini...

Mengapa ? Dan bagaimana cara melakukannya dengan benar?

<!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>

javascript html jquery onclick xhtml
person Stefan Steiger    schedule 27.06.2012    source sumber
comment
Apakah Anda sudah mencoba metode .on() atau .delegated()? Saya tidak dapat mencoba apa pun, karena saya tidak sedang duduk di depan komputer.   -  person Reporter    schedule 28.06.2012
comment
Mengingat Anda menggunakan jQuery 1.7.1, coba gunakan .prop() atau .removeProp() daripada .attr(). Menghapus atau menyetel ulang atribut tidak berarti nilai properti terkait akan berubah.   -  person Jonathan Lonowski    schedule 28.06.2012
comment
@reporter: Sejauh ini masih berfungsi, tapi sekarang saya tidak bisa melepasnya lagi, haha ​​;)   -  person Stefan Steiger    schedule 28.06.2012

Jawaban (3)


arrow_upward
1
arrow_downward

Tampaknya penangan kejadian sebaris tidak dapat dilepas ikatannya oleh jQuery: Melepas ikatan sebaris onClick tidak berfungsi di jQuery?

Jadi saya tidak yakin apakah ini akan berhasil, tetapi alih-alih menggunakan:

.attr("onclick", "")

mencoba:

.removeAttr("onclick")

Beri tahu kami jika hal itu mengubah sesuatu.

PEMBARUAN:

Saya membuat jsFiddle untuk menunjukkan kepada Anda bagaimana fungsinya "lebih mudah": http://jsfiddle.net/S2ARR/3/

Banyak hal bergantung pada hal-hal tertentu, seperti menggunakan struktur saya - menempatkan rentang di dalam kolom daripada menggunakan kolom untuk semuanya. Saya tidak menggunakan id elemen untuk pemilihan jQuery karena saya tidak yakin mengapa Anda tidak melakukannya - jika Anda menyetel id elemen dan perlu mengaksesnya, Anda sebaiknya menggunakan pemilih id di jQuery. Jadi Anda tidak perlu menggunakan .parent() atau .find() dalam contoh saya jika Anda hanya menggunakan id. Semoga ini yang Anda cari. Saya pikir yang penting adalah panggilan .stopPropagation(), jika tidak, sepertinya tidak akan berhasil.

person Ian    schedule 27.06.2012
comment
Baru saja memperbarui dan memberikan contoh kecil tentang apa yang Anda cari, sedikit memodifikasi kode Anda. Tampaknya berhasil untuk saya! - person Ian; 28.06.2012
comment
Yap, .stopPropagation() adalah keajaiban yang sesungguhnya. PS: Tampaknya berfungsi dengan baik dengan td, bukan span. HTML Anda tidak valid. - person Stefan Steiger; 28.06.2012
comment
Terserah Anda apakah Anda ingin mengikat keseluruhan ‹td› atau ‹span›. Bagaimana HTML saya tidak valid? - person Ian; 28.06.2012

arrow_upward
1
arrow_downward

saya mengubah acara Anda menjadi delegasi, menghapus onclick dari tabel dan memanggilnya menggunakan jquery. Namun saya tidak yakin apakah yang saya dapatkan adalah perilaku keinginan Anda.

jsfiddle

Perbarui

Hai, saya memperbarui dengan perilaku yang diinginkan.

Solusi

person KoU_warch    schedule 27.06.2012
comment
@Quandary up, maaf saya tetap membuatnya berhasil! berharap setidaknya bisa sedikit membantu - person KoU_warch; 28.06.2012

arrow_upward
0
arrow_downward

Daripada mengikat acara melalui atribut onclick, Anda bisa mengikatnya ke sel tabel dengan jquery.

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

Kemudian, Anda dapat menjamin bahwa Anda dapat membatalkan ikatan acara tersebut dengan melepaskan ikatannya nanti.

person Thinking Sites    schedule 27.06.2012
comment
saya sudah mencobanya, tidak ada bedanya... unbind berfungsi btw, masalahnya adalah ketika saya mencoba mengikat ulang. - person Stefan Steiger; 28.06.2012
comment
Masalah mendasar Anda adalah tidak mengikat, ya? Saya kesulitan membaca deskripsi Anda. - person Thinking Sites; 28.06.2012
comment
Tidak, itu tidak mengikat dengan benar. Mengikat kembali adalah masalahnya. Segera setelah saya melakukan rebind, saya menjalankan acara klik tanpa mengklik... - person Stefan Steiger; 28.06.2012
comment
Oh begitu. Biarkan saya melihat ini dan menghubungi Anda kembali. - person Thinking Sites; 28.06.2012