0

こんにちは、コンテナ内にページを動的にロードするサイトがあります。次のようなナビゲーション メニューがあります。

<div class="menu">
    <p align="left" id="home" class="titolo_menu">home</p>
    <p align="left" id="azienda" class="titolo_menu azienda"><br>azienda</p>
    <p align="left" id="staff" class="titolo_sotto_menu azienda">staff</p>
    <p align="left" id="risorseumane" class="titolo_sotto_menu azienda">risorse umane</p>
</div>

そして、私のjQueryに次の行を追加しました：

$(document).ready(function(){
    $('.titolo_menu').bind('click',function(){
            $('.titolo_menu').unbind('click');
             //more code...
     });
  });

ユーザーがクラス "titolo_menu" で ap をクリックしてイベント クリックを無効にしたいが、機能しない場合は、ますますクリックできるようになります。どうすれば解決できますか？

4

4 に答える 4

2

アプリケーションで本当に必要なものを理解できませんでしたが、次のように、data-*属性を使用して DOM 自体の状態を同じにすることを検討してください。

$(document).ready(function(){
    $('.titolo_menu').on('click',function(){

        // let's create a reference for current element
        $p = $(this);

        // if clicked element had data-disabled attribute set, return
        if($p.data('disabled'))
            return;

        // disable element;
        $p.data('disabled', true);

        // do your stuff here, e.g.
        $.get('dapage.html', function(data){

            // do your stuff on data retrieving
            $(something).html(data);

            // re-enable element
            $p.data('disabled', false);

        });

   });
});

このようにして、バインド解除をいじることなく、イベントを制御できます。

于 2012-10-31T15:34:37.833 に答える
0

クラス名を変更するだけ

$('.titolo_menu').bind('click',function(){
           $(this).removeClass('.titolo_menu');
             //more code...
     });

または、すべての要素を無効にする場合：

$('.titolo_menu').bind('click',function(){
            $('.titolo_menu').removeClass('.titolo_menu');
             //more code...
     });

'bind'の代わりに'live'を使用すると機能しません

//編集申し訳ありませんが機能しません。ライブで使用するだけです。

$('.titolo_menu').live('click', function(){
  $('.titolo_menu').removeClass('.titolo_menu');
});

ただし、ページの読み込み中に複数クリックが発生しないようにする場合は、次を使用してください。

.attr('disabled', 'disabled');
于 2012-10-31T15:13:51.737 に答える
0

最初に、メニューを作成するときはソートされていないリストを使用し、<a>タグを使用してページをリンクすることをお勧めします。

例：

<ul id="menu">
    <li id="home" class="titolo_menu"><a href="#home">home</a></li>
    <li id="azienda" class="titolo_menu azienda"><a href="#azienda">azienda</a></li>
    <li id="staff" class="titolo_sotto_menu azienda"><a href="#staff">staff</a></li>
    <li id="risorseumane" class="titolo_sotto_menu azienda"><a href="#risorseumane">risorse umane</a></li>
</ul>

jQuery では、次のようなことができます。

$(function() {

    $("#menu a").click(function(e) {
        var clickedElement = $(this);
        var clickedElementText = clickedElement.text();

        // Check if current link is not yet active
        if (!$(clickedElement).hasClass("active")) {

            if ($(".active").length > 0) {
                // Deactivate current active link
                var active = $(".active ");
                var activeText = $(active).text();

                $(".active").replaceWith("<a href = '#" + active.parent().attr("id") + "' > " + activeText + " </a>");
            }
            // Change the clicked link to be activated
            $(clickedElement).replaceWith("<span class='active'>" + clickedElementText + "</span>");

            // Load your page or whatever here :)

            // Prevent normal link behavior
            e.preventDefault();
        }
    });
});
于 2012-10-31T15:51:41.047 に答える
0

これを試すことができます....

$(document).ready(function(){
var return_flag = true;
    $('.titolo_menu').bind('click',function(){
        if(return_flag){
             //more code...
        }
    return_flag = false;
     });
  });
于 2012-10-31T15:06:00.013 に答える