相关疑难解决方法(0)

我曾多次听说过onClick()在HTML 中使用JavaScript事件是一种不好的做法,因为它对语义不利.我想知道缺点是什么以及如何修复以下代码？

<a href="#" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>

我正在尝试为网站制作用户脚本以添加自定义表达.但是,我遇到了很多错误.

这是功能:

function saveEmotes() {
    removeLineBreaks();
    EmoteNameLines = EmoteName.value.split("\n");
    EmoteURLLines = EmoteURL.value.split("\n");
    EmoteUsageLines = EmoteUsage.value.split("\n");

    if (EmoteNameLines.length == EmoteURLLines.length && EmoteURLLines.length == EmoteUsageLines.length) {
        for (i = 0; i < EmoteURLLines.length; i++) {
            if (checkIMG(EmoteURLLines[i])) {
                localStorage.setItem("nameEmotes", JSON.stringify(EmoteNameLines));
                localStorage.setItem("urlEmotes", JSON.stringify(EmoteURLLines));
                localStorage.setItem("usageEmotes", JSON.stringify(EmoteUsageLines));
                if (i == 0) {
                    console.log(resetSlot());
                }
                emoteTab[2].innerHTML += '<span style="cursor:pointer;" onclick="appendEmote(\'' + EmoteUsageLines[i] + '\')"><img src="' + EmoteURLLines[i] + '" /></span>';
            } else {
                alert("The maximum emote(" + EmoteNameLines[i] + ") size is (36x36)");
            } …

所以当我点击按钮时我想要发生什么事情我可以做:

<!-- EXAMPLE A-->
<input type="button" onclick="alert('hello world');">

或者我能做到

<!-- EXAMPLE B-->
<input type="button" id="clickme">
<script>
   $('#clickme').on("click",function(){alert('hello world');});
</script>

或者当然任何变化(on change,on hover)和快捷方式(.click() .change())都是可能的......

除了A更短的事实,有什么区别？哪个更好？为什么？

我注意到,当我使用.html()动态添加元素到网站时(如按钮)B不适用于这个新创建的按钮,我需要使用A ...

任何见解都会有所帮助!

假设我有一个div,我想在用户点击该div时运行某个代码.我可以通过两种方式实现这一目标.

HTML

<div id="clickme">Click Me</div>

使用Javascript

$(document).ready(function(){
    $('#clickme').click(function(){
        //Other code here doing abc.
    });
});

第二种方法是调用一个完全正确的函数,但它由一个函数调用

<div id="clickme" onclick="clickme()">Click Me</div>

使用Javascript

function clickme(){
    //Other code doing abc.
}

我的问题是,这两个代码都在做同样的事情吗？哪个更有效率和推荐？

我<a>在页面上有一堆看起来像的标签

 <a href="#" id="001" onclick="fnaaa();" >...</a>
  ...
 <a href="#" id="002" onclick="fnaba();" >...</a>
  ...
 <a href="#" id="003" onclick="fncda();" >...</a>


 //sometimes maybe like this
 <a href="#" id="004" onclick="fnagg(); return false;" >...</a>
  ...

现在我将id作为查询字符串传递给页面,所以我原本想做类似的事情

$('a[id="' + id + '"]').click();
$('a[id="' + id + '"]').trigger("click");

事实证明这两个都是不允许的,所以如果我有id,我怎么能调用onclick属性中写的函数？我知道我可能会这样

var funcToCall = $('a[id="' + id + '"]').attr('onclick');

但是如何调用此funcToCall？记住funcToCall可能只是一个函数名ex."fnagg();返回false;"

如果我使用Tampermonkey以编程方式创建div:

HTML:

<div onclick="myfunc()"/>

脚本:

function myfunc() { alert("clicked"); }

然后点击div; myfunc在我的脚本中没有调用.

我怎样才能让它发挥作用？

(我使用TM/jQuery将div添加到页面中,我想附加一些功能.我假设我必须将HTML中的函数调用重定向到正确的位置.我也使用GM_函数,所以我不能只需直接插入代码.)

我有以下函数应该产生一个名为"totalPrice"和"premPrice"的div的结果,但.innerhtml似乎没有出于某种原因将数字放在div中？您是否可以查看这段代码并告诉我为什么它不输入html的可能原因？由于我是网络语言的新手,你是否需要调用该函数？或者当我简单地定义它是被称为的函数？

HTML:

            <label class='next action-button'><input type="button"  name="tank" value="Yes" onclick="calculateTotal()" />Yes</label><br/>
 <p>standard and premium system specs</p>
    <br/>
                <div id="totalPrice"></div>
                <br/>
                <div id="premPrice"></div>

JS:

function calculateTotal()
{

    var boilerPrice = getBoilerSizePrice() + getBedroomSizePrice() + getBathroomSizePrice()  + getTankSizePrice() ;

    //display the result
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Your New Boiler Install Price is £"+boilerPrice;

    var divobj = document.getElementById('premPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Premium price £"+((boilerPrice/100)*120);

}

所以我的PHP echo中有这段代码；

<input type="submit" value="Send Love" class="btn btn-primary" onclick="this.form.submit(); this.disabled=true; this.value=\'Sending Love…\';" />

如您所见，文本将在onclick更改，按钮将被禁用，并且表单将被提交。但是我想做的是在发送之外添加一个fontawesome微调器，以便在提交按钮时会有一个微调器。我尝试添加它，但是没有显示出来，并且破坏了代码的输出；我也尝试过'\'\在Sending中使用like，但是它仍然没有显示，并且onclick函数被破坏了。

<input type="submit" value="Send Love" class="btn btn-primary" onclick="this.form.submit(); this.disabled=true; this.value=\'<i class="fa fa-spinner fa-spin"></i> Sending Love…\';" />

所以有人可以帮我解决这个问题吗？确实要添加该微调器。提前致谢！

当我单击该链接时，我希望该链接也被单击。但是，我的代码没有任何反应，请参阅fiddle。

HTML：

<section class="space_between">
  <h3 class="center_rounded_ol">Man-to-man suggestions</h3>
    <ol class="rounded-list center_rounded_ol">
      <li>
        <a href="javascript:" id="foo" onClick="burn()">Name Surname</a>
      </li>

    </ol>
</section>

<nav class="nav-fillpath">
  <a class="next" onClick="load()">
    <span class="icon-wrap"></span>
    <h3><strong>Alexis</strong> Tsipras</h3>
  </a>      
</nav>

JavaScript：

function load() {
  $("#foo").tigger('click');
}
function burn() {
  $(this).css("color", "red");
}

我正在努力寻找悬挂事件的最有效方式.

让我们想象我们有这样的结构:

<ul>
    <li> 1st li </li>
    ...
    <li> 99999th li </li>
<ul>

所以,我们有大约10000个li元素,我们想要为所有这些元素添加事件监听器,假设我们也可以使用jQuery.

首先想到的

<li onclick="console.log(this)" >...</li>

这个解决方案的一个不好的部分 - 我们增加了html标记的大小,因为总是重复onlick

第二个念头

$('ul li').on('click', function(){ 
    console.log(this)
})

当然这个解决方案不是一个选项,因为我们添加了10000个事件监听器,显然不利于性能.

第三个想法,事件授权

$('ul').on('click', 'li', function(){
    console.log(this)
})

看起来非常好,对我来说,我们只使用一个事件监听器,而不是删除html标记,它可以正常工作.

所以,我问这个问题,因为有时我会查看不同网站的来源,其中很大一部分使用第一种方式.为什么？第一种方式有一些优势？

我想这可能是因为抓住动态添加的元素到页面更容易,但可能有些东西我不知道？