2016-01-16 40 views
-2

我有這種模式一堆形式:如果removeClass不影響源代碼,那有什麼意義?

<form action="/go/special" method="POST" target="_blank"> 
<input name="a" type="hidden" value="something"/> 
<input type="submit" class="general effect" value="click me"></form> 

對於具有special其作用內部的各個形式,我想用這個jQuery代碼刪除effect類:

<script src="/js/colorbox.js"></script> 

<script> 
jQuery(function($) { 
    // find all forms that have "special" in the action, find their input, and add the class 
    $('form[action*="special"] input[type="submit"]').removeClass('effect'); 
}); 
</script> 

編輯:

effect類代碼:

(jQuery, document, window), $(document).ready(function() { 
    $(".effect").click(function(t) { 
     t.preventDefault(); 
     var e = $(this).closest("form"); 
     return $.colorbox({ 
      href: e.attr("action"), 
      transition: "elastic", 
      overlayClose: !1, 
      maxWidth: $("html").hasClass("ie7") ? "45%" : "false", 
      opacity: .8, 
      data: { 
       ago: e.find('input[name="a"]').val(), 
      } 
     }), !1 
    }) 

鏈接的彩盒代碼休息:

https://github.com/jackmoore/colorbox/blob/master/jquery.colorbox.js

effect類是Colorbox插件。如果存在,表單將在與模態窗口相同的窗口中打開。如果沒有,表格將在新標籤中打開。

該腳本刪除effect類,但我可以看到只有當我檢查元素與我的控制檯它被移除。

然而,源代碼,沒有受到影響,而且還表明,它含有的類effect

因此,當我提交表單,它將使用顏色框插件,打開一個模式窗口,而不是新的選項卡。

是否有在第一時間使用removeClass任何一點?

是否有任何變通辦法?

+0

你是什麼意思'源代碼? – maowtm

+3

Javascript在瀏覽器中運行,它修改了顯示的DOM。源代碼位於服務器上,瀏覽器無法更改。 – Barmar

+2

源代碼是當頁面加載時運行JavaScript時最初加載的內容,並用您的更改更新DOM。 – Enjayy

回答

3

這個問題,據我所看到的是,你正在阻止提交點擊操作(即提交表單)的默認處理,但從你的描述看來,你實際上需要默認的操作發生。這有點令人困惑,但我會認爲你想要動態地改變行爲,取決於你是否在提交按鈕上有這個類。

這是Event Delegation一個完美的案例。事件委託在某種意義上是一種將事件處理程序附加到符合條件的元素的方法,現在或將來,條件將在事件發生時進行評估,而不是在附件時進行評估。

我會假設你要附上您單擊處理程序提交具有被包含在任何form標籤effect類按鈕和form標籤已經在附件(頁面加載)的時間存在。

$(function() { 
    $("form").on("click", "input[type='submit'].effect", function(t) { 
     t.preventDefault(); 
     var e = $(this).closest("form"); 
     return $.colorbox({ 
      href: e.attr("action"), 
      transition: "elastic", 
      overlayClose: !1, 
      maxWidth: $("html").hasClass("ie7") ? "45%" : "false", 
      opacity: .8, 
      data: { 
       ago: e.find('input[name="a"]').val(), 
      } 
     }), !1 
    }); 
}); 

這個做什麼,引擎蓋下:

  1. 查找所有form元素
  2. 上連接click處理程序,他們中的每一個,另外加入input[type='submit'].effect選擇它
  3. 當點擊事件冒泡建立DOM樹併到達form元素,檢查其源是否與該附加選擇器匹配。
  4. 如果匹配,則執行事件處理程序。它會阻止默認操作(提交表單)並啓動colorbox。
  5. 如果不匹配,它會繼續冒泡,最終觸發默認操作(表單提交)。
+0

只需要調整選擇器'submit.effect',但是+1。這意味着選擇一個標籤'' charlietfl

+0

@charlietfl,啊,對,應該是像'輸入[類型=提交] .effect'。我會改變的答案時,我會找到的jQuery(即將推出) – weirdan

+0

支持確切的語法語法是有效的 – charlietfl

0

你說:

該腳本去除效果一流,但我可以看到只有當我檢查元素與我的控制檯它被移除。

但是,源代碼沒有受到影響,仍然顯示它包含效果類。

該課程正在被刪除。這就是爲什麼當您檢查元素時可以看到它被移除的原因。我猜你說的「源代碼」是指右鍵單擊選項「查看源代碼」。當您查看源代碼時,您正在查看瀏覽器在運行任何JavaScript之前加載的原始代碼。因此,JavaScript對頁面所做的任何修改都不會顯示在視圖源選項中。您只會看到瀏覽器開發工具中的更改。

+0

它在Live html中被移除...問題是事件在此之前被綁定 – charlietfl

相關問題