Wordpress TinyMCE Strips OnClick& OnChange（需要jQuery）

问题描述

在我的Wordpress上找到一个解决方案，但找不到一个特定于我需求的解决方案，非常抱歉。网站我有一个带有按钮的页面，为了跟随该按钮的链接，需要检查复选框。这是它的代码...

 < form action =＃>< input onchange =toggleAccept （）id =agreeCheckboxtype =checkbox/>< label for =agreeCheckbox>我同意以下条款< / label>< / form> 
 
< a href =link /？cbur = aid =acceptonclick =mustAccept（）; return false;>< img src =button.png/ >< / A> 
  

还有一些代码可以处理这个问题：

 < script type =text / javascript> 
函数toggleAccept（）{
 var acceptLink = document.getElementById（accept）; 
 var agreeCheckbox = document.getElementById（agreeCheckbox）; 
 if（agreeCheckbox.checked）{
 acceptLink.onclick = function（）{
 window.location = this.href +& cbrblaccpt = true; 
返回false; 
} 
} else {
 acceptLink.onclick = function（）{
 mustAccept（）; 
返回false; 
 
 
 $ b函数mustAccept（）{
 window.alert（请勾选此复选框并同意此循环产品的付款条款。） ; 
} 
 
 cbrblaccpt 
< / script> 
  

基本上，如果有人试图单击底部而未勾选框，则会出现上述弹出窗口。

我遇到的问题是TinyMCE正在删除onchange和onclick部分的内容代码。我猜，因为它不喜欢内联Java在那里。

经过大量的研究，我认为理想的解决方案是使用jQuery来处理在一个单独的文件，但我绝对不知道如何做到这一点。

如果有人可以在这方面提供帮助，或者提供另一种解决方法，那么我都是耳朵。

非常感谢

解决方案

我为您做了一个例子：

记住要添加在< script> 之前，如果可能的话，在< / body> 关闭HTML标记：D

jQuery ：

 <脚本> 
 $（document）.ready（function（）{
 var agree = $（＃accept）; //我们缓存元素，不要担心
 
 $（点击（函数（）{
 var checked_status = this.checked; 
 if（checked_status === true）{
 agree.removeAttr（disabled）; 
 $ else {
 agree.attr（disabled，disabled）; 
} 
}）; 
 //我们将按钮转换为一个锚点
 agree.click（function（）{
 window.location = $（this）.data（href）+& cbrblaccpt = true; 
}）; 
}） ; 
< / script> 
  

CSS ：因为我们使用的是按钮而不是锚点code $< a>< / a> ）

  #accept {
 background：url（http://goo.gl/kCsKU3）center top no-repeat; 
颜色：#FFF; 
 display：block; 
 width：200px; 
 height：44px; 
 border：none; 
概述：无; 
光标：指针; 
} 
 #accept：disabled {
 opacity：0.6; 
} 
 #accept：active {
 margin-top：2px; 
} 
  

最后， HTML 重新使用 data-href 属性作为链接而不是简单的 href ，因为这是一个按钮，不再是锚点。

 < input id =agreeCheckboxtype =checkbox/> 
< label for =agreeCheckbox>我同意< / label> 
< button data-href =link /？cbur = aid =acceptdisabled =disabled>< / button> 
  

JsFiddle：

Searched a long time to find a solution, but can't find one specific to my needs, so apologies if I've missed something.

On my Wordpress site I have a page with a button, which in order to follow the link of that button a checkbox needs to be checked. This is the code for it...

<form action="#"><input onchange="toggleAccept()" id="agreeCheckbox" type="checkbox" /><label for="agreeCheckbox">I agree to the terms</label></form>

<a href="link/?cbur=a" id="accept" onclick="mustAccept(); return false;"><img src="button.png"/></a>

There's also some code handling this in the head:

    <script type="text/javascript">
function toggleAccept() {
var acceptLink = document.getElementById("accept");
var agreeCheckbox = document.getElementById("agreeCheckbox");
if (agreeCheckbox.checked) {
acceptLink.onclick=function() {
window.location=this.href + "&cbrblaccpt=true";
return false;
}
} else {
acceptLink.onclick=function() {
mustAccept();
return false;
}
}
}
function mustAccept() {
window.alert("Please check the box and agree to the payment terms of this recurring product.");
}

cbrblaccpt
  </script>

Basically, if someone tries to click the bottom without checking the box, the above popup appears. Once they check the box, they are taken to the button's link.

The issue I'm having is the TinyMCE is removing the "onchange" and "onclick" parts of the code. I'm guessing because it doesn't like inline Java being there.

After a lot of looking around it seems to me that the ideal solution is to handle this with jQuery in a separate file, but I have absolutely no idea how to do that.

If someone could help in that regard, or perhaps offer another work around then I'm all ears.

Thanks a lot

解决方案

Well... yes you can handle it with pure jQuery.

I've made an example for you:

REMEMBER to add the jQuery library to your document, just before this <script> and if possible, just before </body> closing HTML tag :D

jQuery:

<script>
    $(document).ready(function () {
    var agree = $("#accept"); //we cache the element, dont worry

    $("#agreeCheckbox").click(function () {
        var checked_status = this.checked;
        if (checked_status === true) {
            agree.removeAttr("disabled");
        } else {
            agree.attr("disabled", "disabled");
        }
    });
    //we convert the button into an anchor
    agree.click(function () {
        window.location = $(this).data("href") + "&cbrblaccpt=true";
        });
    });
</script>

CSS: Because we are using a button instead of an anchor (<a></a>)

#accept {
    background: url(http://goo.gl/kCsKU3) center top no-repeat;
    color: #FFF;
    display: block;
    width: 200px;
    height: 44px;
    border:none;
    outline: none;
    cursor: pointer;
}
#accept:disabled {
    opacity: 0.6;
}
#accept:active {
    margin-top:2px;
}

And finally, the HTML: Note we're using data-href attribute for the link instead of a simple hrefbecause this is a button, not an anchor anymore.

<input id="agreeCheckbox" type="checkbox" />
<label for="agreeCheckbox">I agree to the terms</label>
<button data-href="link/?cbur=a" id="accept" disabled="disabled"></button>

JsFiddle: http://jsfiddle.net/n2zej2cg/

这篇关于Wordpress TinyMCE Strips OnClick& OnChange（需要jQuery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！