0

Tooltipster ( http://calebjacob.com/tooltipster/ )という jquery プラグインを使用しており、href を含むヒントに HTML を挿入しています。リンクをクリックすると、期待どおりにページが開きます。ただし、同じ href を使用しようとすると、クラス名を追加してから jquery 関数を起動しようとすると、起動しません。私はこれを理解しようとして何時間も髪を引っ張ってきました. どんな助けでも大歓迎です。以下は、例を説明するためにいくつかのコードを簡略化したものです。

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="tooltipster.css" />
<script language="javascript" type="text/javascript"  src="Scripts/jquery-1.8.0.min.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jquery.tooltipster.js"></script>

<script>
$(document).ready(function() {
    $('.element').tooltipster({
       animation: 'fade',
       delay: 180,
       offsetX: 0,
       offsetY: 0,
       onlyOne: true,
       position: 'top',
       maxWidth: '300',
       speed: 150,
       timer: 0,
       theme: '.tooltipster-default',
       interactive: true,
       interactiveTolerance: 350,      
       updateAnimation: true,
       trigger: 'custom',
       interactive: true
    });

    $('.element').tooltipster('update', 'Select an Image from the right hand image list.<a class="update" href="#">Cancel Editing.</a>');
    $('.element').tooltipster('show');

    $('.update').click(function(){
        alert("hello");
    }); 

});


</script>

</head>

<body>

<a class="update" href="#">Hello</a>


<div align="center" class="element" title="Try clicking <a href='http://google.com'>this link</a>"> 
    <p>This div has a tooltip when you hover over it!</p>
</div>

</body>
</html>

問題を説明するためにフィドルをまとめました。 http://jsfiddle.net/bCqyL/

4

1 に答える 1

2

.udpate 要素のクリック ハンドラーを設定すると、jquery はこのクラスの要素をまだ認識していません。これが、あなたの例でハンドラが設定されていない理由です。代わりに、ドキュメントのすべてのクリックを処理し、.update 要素のみを選択する別のアプローチを使用してください。

$(function(){
    $(document).on('click', '.update', function(){
        alert('hello');
        return false;
    });    
});

http://jsfiddle.net/bCqyL/3/

于 2014-01-28T14:09:55.207 に答える