jQuery的屬性文字

給出下面的標記jQuery的屬性文字

<ul class="ulGreen"> 
       <li><b>On-Board systems - Road Vehicle</b><span style="color:black;"> (See an installation picture<a href="#" data-rel="onBoardVehiclepicdisplay">here</a>)</span> </li> 
       <li><b>On-Board systems - Marine Vessel</b><span style="color:black;"> (See an installation picture<a href="#" data-rel="onBoardVesselpicdisplay">here</a>)</span> </li> 
       <li><b>On-Board systems - FuelingBarge</b><span style="color:black;"> (See an installation picture<a href="#" data-rel="onBoardFuelBargepicdisplay">here</a>)</span> </li> 

      </ul>

和下面的腳本

<script> 
    $(document).ready(function() { 

     $('.ulGreen').delegate(' li span a').click(function() { 
      var divID = $(this).attr("data-rel").text; 
      alert(divID); 

     }); 
    }); 

</script>

DIVID應該包含從點擊標籤的數據-rel屬性的文本，但它不或者你不會讀這個。 HTML呈現完全如上所示。

來源

2012-10-28 dinotom

幾件事： 1）text（）並不是要提取屬性的值，attr既是一個setter也是一個getter，你不需要在這裏使用它。 2）在點擊時，這是.ulGreen元素，而不是您點擊的錨點。 – leopic

首先，使用.data()來引用data-屬性。

但真正的問題在於以這種方式使用delegate()。當使用find()，它只是罰款（見jsFiddle）：

$(document).ready(function() { 
    $('.ulGreen').find('li span a').click(function() { 
     var divID = $(this).data("rel"); 
     alert(divID); 
    }); 
});

如果您需要實時更新事件（並使用jQuery 1.7+），使用.on()（見jsFiddle）：

$(document).ready(function() { 
    $('.ulGreen').on('click', 'li span a', function() { 
     var divID = $(this).data("rel"); 
     alert(divID); 
    }); 
});

來源

2012-10-28 22:39:45 Eric

的text()方法返回一個字符串，它沒有text()方法，簡單地忽略該方法調用：

$('.ulGreen').delegate('li span a').click(function(e) { 
    var divID = $(e.target).attr("data-rel"); 
    alert(divID); 
});

JS Fiddle demo。

的e.target指元件點擊（事件的目標，e），而this（和jQuery對象$(this)）中提到的ul本身。

來源

2012-10-28 22:35:52

jQuery的屬性文字

回答

相關問題