動態加入標籤選取不到問題

javascript jquery

豬豬人 2019-10-09 10:28:50 ‧ 1815 瀏覽

分享至

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="dv">
    </div>
    <div id="a"></div>
    <script src="js/jquery.js"></script>
    <script>
        var p = document.createElement('p');
        var div = document.createElement('div');
        div.id = 'in';
        p.innerHTML = '123';
        p.id = 'p';
        div.append(p);
        $('#dv').append(div);
        
        $('#p').bind('click',function(){
            var div = document.createElement('div');
            div.className = 'img-div';
            div.innerHTML = [   '<div class="drop-left"></div>'+
                                '<div class="img_wrap">'+
                                    '<p id="aq">123</p>'+
                                    '<p id="b">456</p>'+
                                    '<p id="c">789</p>'+
                                '</div>'+
                                '<div class="drop-right"></div>'
                                ].join('');
            $('#a').insertBefore(div, null);
            
        })

        $('#aq').bind('click',function(){
            alert($(this).html());
        })
    </script>
</body>
</html>

問題1:
$('#a').insertBefore(div, null);不可行
但是改成
document.getElementById('a').insertBefore(div, null);
就可以運作

問題2:
$('#aq').bind('click',function(){
alert($(this).html());
})
無法有效選擇到

豬豬人 iT邦新手 4 級 ‧ 2019-10-09 10:46:04 檢舉

問題有修改了

淺水員 iT邦大師 6 級 ‧ 2019-10-09 11:08:27 檢舉

問題一也是因為分不清楚 jQuery 跟原生 javascript
jQuery 的 insertBefore：https://api.jquery.com/insertBefore/

淺水員 iT邦大師 6 級 ‧ 2019-10-09 11:11:46 檢舉

問題二是因為 click 之後根本沒跑到
```
$('#aq').bind('click',function(){
alert($(this).html());
})
```

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

4 個回答

ccutmis

iT邦高手 2 級 ‧ 2019-10-09 11:39:28

最佳解答

不確定這是不是你要的，可以參考看看:
http://www.web3d.url.tw/demo/USER/ccutmis/jquery_bind/

<style>
#dv{background:#ccc;border:solid 5px #666;padding:10px;}
.img_wrap{background:#c6ffaa;margin:2px 0px;}
</style>
<div id="dv"></div>
<div id="a"></div>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script>
        var p = document.createElement('p');
        var div = document.createElement('div');
        div.id = 'in';
        p.innerHTML = '123';
        p.id = 'p';
        div.append(p);
        $('#dv').append(div);
        
        $('p').bind('click',function(){
            var div = document.createElement('div');
            div.className = 'img-div';
            div.innerHTML = 
            [   '<div class="drop-left"></div>'+
                                '<div class="img_wrap">'+
                                    '<p id="aq">123</p>'+
                                    '<p id="b">456</p>'+
                                    '<p id="c">789</p>'+
                                '</div>'+
                                '<div class="drop-right"></div>'
                                ].join('');
            $('#a').html('').append(div.innerHTML)
            $('#aq').on('click',function(){
                 alert($(this).html());
            });
            
        })
</script>

回應
分享
檢舉

登入發表回應

耿直小伙

iT邦新手 1 級 ‧ 2019-10-09 10:35:53

如果你的click事件不是放在innerHTML觸發之後我認為是無法成功綁定的，若直接以body或其他父元素去綁定#delete應該就沒這個問題。

要不要試試看用這個方式去綁定#delete呢？

$('body').on('click', '#delete', function(e) {
	alert(123);
});

回應 1
分享
檢舉

豬豬人 iT邦新手 4 級 ‧ 2019-10-09 10:46:10 檢舉

問題有修改了

登入發表回應

咖咖拉

iT邦好手 1 級 ‧ 2019-10-09 10:36:52

$("#delete").bind("click",function(){
  alert(123);
});

混原生JS 好像怪怪的

這樣寫試試看

.insertBefore 事件你的用法也不太對
一般是這樣寫不過你直接混JS
能不能工作是測看看

$(div).insertBefore("#a");

回應 2
分享
檢舉

豬豬人 iT邦新手 4 級 ‧ 2019-10-09 10:45:54 檢舉

問題有修改了

咖咖拉 iT邦好手 1 級 ‧ 2019-10-09 10:47:14 檢舉

還是一樣問題喔

 document.getElementById('aq').bind('click',function(){
            alert($(this).html());
        })

JQ不能這樣寫

登入發表回應

小魚

iT邦大師 1 級 ‧ 2019-10-09 11:27:37

jQuery取出來的物件

var div = $('#div');

和
JavaScript取出來的物件

var div = document.getElementById('div');

兩個物件是不一樣的,
你可以試試用jQuery物件去操作JavaScript物件的函式是不行的,
你把兩種方法混著用,
就是所謂的畫虎不成反類犬.

回應 2
分享
檢舉

ccutmis iT邦高手 2 級 ‧ 2019-10-09 12:13:55 檢舉

混用又沒把jQuery功用最大化確實是不太妙

            var div = document.createElement('div');
            div.className = 'img-div';
            div.innerHTML = 
            [   '<div class="drop-left"></div>'+
                                '<div class="img_wrap">'+
                                    '<p id="aq">123</p>'+
                                    '<p id="b">456</p>'+
                                    '<p id="c">789</p>'+
                                '</div>'+
                                '<div class="drop-right"></div>'
                                ].join('');
            $('#a').html('').append(div.innerHTML)

像這個是一般JS的寫法，通常後面會接appendChild()把建創出來的元素插入到存在頁面上的元素裡，但如果是用jQuery的append()方法，只需帶入html字串就會自動處理那些document.createElement...的雜事，例如改成:

            var htmlStr='<div class="img-div">'+
                '<div class="drop-left"></div>'+
                '<div class="img_wrap">'+
                '<p id="aq">123</p>'+
                '<p id="b">456</p>'+
                '<p id="c">789</p>'+
                '</div>'+
                '<div class="drop-right"></div></div>';
            $("#a").html('').append(htmlStr);

執行結果一樣...