附加按鈕一旦點擊什麼都不做

我已經做了大量的研究，發現了很多關於溢出的問題，但沒有任何工作。附加按鈕一旦點擊什麼都不做

我有一個按鈕，一旦單擊另一個元素就會附加到頁面上。一旦按鈕在那裏，用戶就可以點擊它來最小化div回到原來的狀態。似乎有很多關於這方面的問題，但幾乎沒有一個人有一個檢查的答案，這個建議所說的嘗試似乎沒有成效。我已經在使用.on（'click'）函數了，但它仍然不起作用。

我有一個問題的小提琴，如果你需要更多的代碼，然後讓我知道！

jQuery的

function newsArticle() { 
    $('.article').on('click', function() { 
     $('.article').append('<span class="close">Click to minimize article</span>'); 
     $('.article').removeClass('article').addClass('fullArticle'); 
    }); 

    $('.fullArticle').on('click', '.close', function() { 
     $('.fullArticle').removeClass('fullArticle').addClass('article'); 
     $('.close').hide(); 
    }); 
} 

newsArticle();

終極密碼（應答）

function newsArticle() { 
    $('.article').on('click', function() { 
     var self = this; 
     var button = $('<span />', { 
      'class': 'close', 
      text: 'Click to minimize article', 
      on: { 
       click: function (e) { 
        e.stopPropagation(); 
        $(self).toggleClass('fullArticle article'); 
        $(this).remove(); 
       } 
      } 
     }); 
    if($(event.target).is('.article')) { 
     $(this).append(button); 
    } 
    else if($(event.target).parents().is('.article')) { 
     $(this).append(button); 
    } 
    $(this).removeClass('article').addClass('fullArticle'); 
    }); 
} 

newsArticle();

我沒有複製和答案粘貼此代碼，我寫它保留我打聽今天在Stackoverflow：D

jsfiddle（開始）

jsfiddle（決賽）

來源

2013-10-01 Josh Powell

要連接事件（代表團），以.article，但在它的點擊要切換的類。所以註冊的事件丟失了。您需要將事件（對於委派）綁定到始終存在的元素（容器），或者將公共類名添加到.article元素中，該元素不會更改並將該事件綁定到該類選擇器。

Fiddle

你在你的代碼的其他一些問題上，靠近的點擊你需要阻止點擊事件的傳播父.article S，否則會冒泡，並添加一個更貼近按鈕再次執行其父母的點擊處理程序。

$('.article').on('click', function() { 
    $(this).append('<span class="close">Click to minimize article</span>').toggleClass('article fullArticle'); 
}); 
    $('.commoncls').on('click', '.close', function (e) { 
    e.stopPropagation(); 
    $(this).closest('.commoncls').toggleClass('fullArticle article').end().remove(); 
});

來源

2013-10-01 20:45:28 PSL

非常感謝你的幫助！謝謝你一百萬的解釋，它真的幫助我。我試圖把握jQuery所提供的一切，我希望我的大學將爲javascript/jQuery提供一些很好的類。 –

我很感興趣，發現你可以使用toggleClass，但最終導致我的問題。你可以打開和關閉文章，因爲它是一個jQuery的切換功能，然後這將繼續添加按鈕。仍然是一個很好的答案！ –

@JoshPowell歡迎您......並一切順利。你可以在一個小提琴中複製這個問題... – PSL

以下是我會做：

$('.article').on('click', function() { 
    var self = this; 
    var button = $('<span />', { 
     'class': 'close', 
     text: 'Click to minimize article', 
     on: { 
      click: function (e) { 
       e.stopPropagation(); 
       $(self).removeClass('fullArticle').addClass('article'); 
       $(this).remove(); 
      } 
     } 
    }); 
    $(this).removeClass('article').addClass('fullArticle').append(button); 
});

FIDDLE

來源

2013-10-01 20:50:25 adeneo

直指點。 – melancia

非常感謝您的幫助！我最終將你的答案和PSL答案混合在一起，讓我自己做出答案！：D再次感謝你！ –

附加按鈕一旦點擊什麼都不做

回答

相關問題