在頁面加載後加載的元素上使用jquery

我想檢查一個按鈕是啓用還是禁用，但該按鈕是在頁面加載後添加的。我怎樣才能做到這一點？在頁面加載後加載的元素上使用jquery

我的代碼需要在禁用按鈕時顯示消息，並在代碼啓用時刪除消息。

我的代碼：

jQuery(document).ready(function() { 
    "use strict"; 

if(jQuery('#checkoutbtn').prop(':disabled')){ 
    console.log('disabled'); 
    jQuery("#voorwaarden").css("display", "inline-block"); 
}else{ 
    console.log('enabled'); 
    jQuery("#voorwaarden").css("display", "none"); 
} 
});

我的HTML代碼：

<div class="checkoutvoorwaarden" id="voorwaarden">Ga akkoord met onderstaande voorwaarden om door te gaan:</div> 
<button type="submit" title="<?php echo $this->__('Place Order') ?>" disabled="disabled" class="button btn-checkout" id="checkoutbtn" onclick="review.save();"><span><?php echo $this->__('Place Order') ?></span></button> 
<p><input type="checkbox" class="checkbox chk" id="voorwaarden" style="display:inline;" required/><b> Ik ga akkoord met de algemene voorwaarden <em style="color:#ff2727;">*</em></b></p> 
<p><input type="checkbox" class="checkbox chk" id="geboorte" style="display:inline;"/><b> Ik ben ouder dan 18 jaar <em style="color:#ff2727;">*</em></b></p>

我的jQuery的，只有當這樣寫的（包裹文件內）工程的一部分：

jQuery(document).on('change','.chk', function() { 
    var checkCount=jQuery('.chk:checked').length; 
    var totalCheckbox =jQuery('.chk').length; 
    totalCheckbox==checkCount ? jQuery("#checkoutbtn").prop('disabled', false):jQuery("#checkoutbtn").prop('disabled', true); 
    });

但我不知道如何使用.on('change')作爲.is(:disabled)屬性。

來源

2017-09-04 twan

請向我們展示添加按鈕的代碼。 – UncleDave

加載頁面後添加按鈕的方式是什麼？ $（document）.ready（）來得太早？ – iquellis

@UncleDave我使用的是Magento，所以我不確定技術細節，但我會在問題中添加我的html代碼。 – twan

你可以換你的代碼中document.ready。它會創建的按鈕後執行，這意味着整個文件加載

$(document).ready(function(){ 
if(jQuery('#checkoutbtn').is(':disabled')){ 
    console.log('disabled'); 
    jQuery("#voorwaarden").css("display", "inline-block"); 
}else{ 
    console.log('enabled'); 
    jQuery("#voorwaarden").css("display", "none"); 
} 
})

片段

$(document).ready(function() { 
 
    if (jQuery('#checkoutbtn').is(':disabled')) { 
 
    console.log('disabled'); 
 
    jQuery("#voorwaarden").css("display", "inline-block"); 
 
    } else { 
 
    console.log('enabled'); 
 
    jQuery("#voorwaarden").css("display", "none"); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="checkoutvoorwaarden" id="voorwaarden">Ga akkoord met onderstaande voorwaarden om door te gaan:</div> 
 
<button type="submit" title="<?php echo $this->__('Place Order') ?>" disabled="disabled" class="button btn-checkout" id="checkoutbtn" onclick="review.save();"><span><?php echo $this->__('Place Order') ?></span></button> 
 
<p><input type="checkbox" class="checkbox chk" id="voorwaarden" style="display:inline;" required/><b> Ik ga akkoord met de algemene voorwaarden <em style="color:#ff2727;">*</em></b></p> 
 
<p><input type="checkbox" class="checkbox chk" id="geboorte" style="display:inline;" /><b> Ik ben ouder dan 18 jaar <em style="color:#ff2727;">*</em></b></p>

來源

2017-09-04 12:42:42 prasanth

它已經是，我應該補充說，我的問題，我編輯它 – twan

你文檔準備好功能不正常關閉檢查這個'）}'是一個無效的關閉更改爲'}）' – prasanth

它被正確關閉，我添加它很快我自己，這是一個默認的magento文件。 – twan

您需要檢查你的按鈕元素是否存在o r不喜歡以下：

這將檢查第一個按鈕是否加載，如果它被加載，那麼只有你的功能將工作。

if ($("#checkoutbtn").length) { 

    if(jQuery('#checkoutbtn').prop(':disabled')){ 
    console.log('disabled'); 
    jQuery("#voorwaarden").css("display", "inline-block"); 
}else{ 
    console.log('enabled'); 
    jQuery("#voorwaarden").css("display", "none"); 
} 

}

JQUERY官方參考：https://learn.jquery.com/using-jquery-core/faq/how-do-i-test-whether-an-element-exists/

來源

2017-09-04 12:45:45

如果你想一個元素進行交互，需要一旦元素被添加到運行代碼。

如果它來自Ajax請求，則可以使用成功處理程序。

如果它是添加元素的函數，請在完成該工作後調用您的方法。

您可以用您的代碼創建一個事件處理程序，並在每次需要時觸發該事件。

如果由於X或Y原因導致所有失敗，您也可以使用間隔輪詢文檔，以便在添加元素後能夠採取行動。

var interval = window.setInterval(function(){ 
    if(jQuery('#checkoutbtn').length){ 
     //Check if element exists. 
     window.clearInterval(interval);//Make sure we stop. 
     if(jQuery('#checkoutbtn').is(':disabled')){ 
      console.log('disabled'); 
      jQuery("#voorwaarden").css("display", "inline-block"); 
     }else{ 
      console.log('enabled'); 
      jQuery("#voorwaarden").css("display", "none"); 
     } 
    } 
},1000);

請注意，這是最後的手段。使用前三個命題你應該有很多其他的可能性。

來源

2017-09-04 12:48:38 Salketer

在頁面加載後加載的元素上使用jquery

回答

相關問題