1

各スパンで個別に一時停止ボタンを機能させようとしています。ユーザーが「追加」ボタン (コードは表示されていません) をクリックするたびに、<span class="emailform">これらの要素の新しいセットが<div class="email">. 新しく追加された要素のスパンの一時停止ボタンにクリック イベント ハンドラーをアタッチする方法がわかりません。私がやろうとしていることを見ることができるように、画像を添付しました。（私は自分の関数を呼び出そうとしているだけでなく、間違ったトリガー（）を使用しています。）

ここにフィドルも含めました。

ご協力いただきありがとうございます！

html:

<div class="email">
     <span class="emailform">
              <label for="vs-email" class="use-email" >Via email:</label>
              <input type="text" class="text-input" />
              <input type="button" class="pause" />
              <input type="button" class="remove"  value="remove" />
      </span>
</div>

jQuery:

$(".pause").on('click', function(e){
     $(e.target).closest("span").trigger(pauseRestore());   
});

function pauseRestore(){
     var oddClick = $(this).data("oddClick");
     $(this).data("oddClick", !oddClick);
     if(!oddClick) {
          pauseAction(); 
     }else {
          restoreAction();
     }
}

元のスタート(良い)

元の状態

「追加」ボタンをクリックした後に追加された別のもの(良い)

新しいスパンを追加しました

クリックして最初だけ一時停止(良い)

選択して最初のスパンを一時停止

クリックして新しい追加を一時停止します (悪い、何も起こりません)

選択して一時停止する 新規追加

最初のスパンで一時停止ボタンをクリックします(BAD -- 両方が選択されて一時停止しています)

両方選択

これが私が望む結果です。ユーザーが新しく追加されたスパン の一時停止ボタンをクリックすると、これだけが一時停止され、他のスパンは一時停止されません。それぞれが別々です。

個人の行動

4

2 に答える 2

2

あなたが過度に複雑にしているあなたのアプローチには多くの問題があります。

最初に問題を箇条書きにしてみます:

  1. $(".use-email")そのクラスのページ内のすべての要素が含まれます。クリックされたボタンに基づいて個々のインスタンスを分離したい。
  2. trigger()名前付き関数の呼び出しには使用できません。jQuery API を確認し、イベントとカスタム イベントの使用方法をよりよく理解することをお勧めします。
  3. インライン CSS を変更するのではなく、クラスを変更することをお勧めします。通常はコードが少なく、元に戻すのがはるかに簡単です
  4. $(".pause").removeClass("btn-pause").addClass("btn-pause");-クラスを削除してから再度追加しますが、意味がありません
  5. イベント ハンドラーを委任して、将来の要素を考慮することができます。
  6. 次のようなプロパティを変更しprop()ないようにメソッドを使用する必要がありますattr()disabled

以下は、必要と思われることを実行し、コードを大幅に削減します。

$(".add").click(function(){
        addItem();
    });
/* delegate handler for future elements*/
$(document).on('click','.pause', function(e){      
    /* using "this" to isolate instance*/
    var $pauseButton=$(this);
    var $emailForm=$pauseButton.closest('.emailform').toggleClass('paused');

   /* clear other paused elements*/
    $('.emailform.paused').not($emailForm)
                          .removeClass('paused')
                          .find( ".text-input").prop("disabled", false) ; 

    var isPaused=$emailForm.hasClass('paused');
    /* use "find()" to look within instance only*/
    $emailForm.find(".text-input").prop("disabled", isPaused);  

});

function addItem(){
   $('div.email').append('html string....'); 
}

デモ: http://jsfiddle.net/vVG3x/3/

于 2013-02-08T01:25:12.783 に答える
1

ここにはいくつかの問題があります：

1) trigger()任意の関数を呼び出すのではなく、イベント ハンドラー関数 (「クリック」など) を実行するために使用されます。関数を呼び出してオブジェクトを渡したい場合は、関数定義でパラメーターを指定して関数を呼び出すだけです。

$(".pause").on('click', function (e) {
    myspan = $(e.target).closest("span");
    pauseRestore(myspan);
});

...

function pauseRestore(myspan) {
    var oddClick = myspan.data("oddClick");
    myspan.data("oddClick", !oddClick);
    ...
}

2) 使用している方法は、呼び出した時点で存在するアイテムに.onのみ適用されます。アイテムの将来のすべてのインスタンスに適用するには、ハンドラーを親オブジェクトにアタッチし、必要なセレクターでフィルター処理する必要があります。.pause.on.pause

$(".email").on('click', '.pause', function (e) {
    ....
}

3) 同様に、関心のあるスパンのセレクターではなく、すべての .use-emailアイテムにセレクターを使用しているため、すべてのアイテムを変更しています。

$(".use-email").css("color", "#b1b1b1");

代わりに、オブジェクトをmyspan含む次のものが必要です。span

myspan.find(".use-email").css("color", "#b1b1b1");

すべてをまとめると、次のフィドルが得られます。

http://jsfiddle.net/umukT/

于 2013-02-08T01:12:21.583 に答える