Javascript 在导航单击事件中编辑div失败_Javascript_Onclick

Javascript 在导航单击事件中编辑div失败

javascript

Javascript 在导航单击事件中编辑div失败,javascript,onclick,Javascript,Onclick,所以我把大部分相关信息输入到代码中我想解释一下发生了什么以及为什么，特别是在.text.html的多重结果和不返回我想要的结果之间 <DOCTYPE! Html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <style> p{color: white; back

所以我把大部分相关信息输入到代码中我想解释一下发生了什么以及为什么，特别是在.text.html的多重结果和不返回我想要的结果之间

<DOCTYPE! Html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
p{color: white;
background: black;}
</style>
<script>  
$('document').ready(function() {
            $(document).on('click', '.nav', function() {
                document.getElementById('text').innerHTML=$(this).html;
            });
}); 
</script> 
</head>
<body>
This is a test html to trouble shoot the functionality of the script, the above script runs and does what it needs to in other aspects but when trying to add in the ability to edit a divs text based on the nav clicked on theres a error.

when using ".text" in the script i get <p> function (a){return V(this,function(a){return void 0===a?m.text(this):this.empty().append((this[0]&&this[0].ownerDocument||y).createTextNode(a))},null,a,arguments.length)} </p> in my div,when i use ".html" in my script i get  <p> function (a){return V(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a)return 1===b.nodeType?b.innerHTML.replace(fb,""):void 0;if(!("string"!=typeof a||mb.test(a)||!k.htmlSerialize&&gb.test(a)||!k.leadingWhitespace&&hb.test(a)||rb[(jb.exec(a)||["",""])[1].toLowerCase()])){a=a.replace(ib,"<$1>");try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(m.cleanData(ub(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)} </p>


<ul id="nav">
    <li class="nav"><a href="#"> This is the text that should be placed in the div </a></li>
</ul>

<div id="text"> this text should be changed </div>
</body>
</html>

html是一个需要调用/使用的函数。或者选择香草口味，然后就这么做。innerHTML

这意味着：

$(document).on('click', '.nav', function() {
    document.getElementById('text').innerHTML = this.innerHTML;
});

代码段中的示例： $'document'.readyfunction{ $document.on'click'，'.nav'，函数{ document.getElementById'text'.innerHTML=this.innerHTML； }; }; 颜色：白色；背景：黑色；} 这是一个测试html，用于故障排除脚本的功能，上面的脚本运行并在其他方面执行它所需的操作，但当尝试添加基于单击的导航编辑divs文本的功能时，出现错误。在脚本中使用.text时，我在div中得到函数a{return Vthis，function{return void 0==a？m.textthis:this.empty.appendthis[0]&&this[0].ownerDocument | y.createTextNodea}，null，a，arguments.length}

，在脚本中使用.html时，我得到函数a{return Vthis，function{var b=this[0]{c=0，c=0，d=0，c=0，c=0，d=该.长度；ifvoid 0，c=0，c=0，c=0，c=0，c=0，c=0，c=0，d=0，d=0，d=0，d=0，d=0，d.c.长度；ifvoid；Ifvovod；c.长度；Ivod；I0，c.I0，c.c=0，c.c=0，c.c=0，c.c=0，c.c.c=0，c.c，c.c.c.c.c.c.c=0，d.长度；c.长度；I0；I0，c；I0，c.c.c.c；I0；I0，c.c.c.c.c=0，c=0，c=0，c.c.c=0，c.c.c.c=0，c=0，c例如，b.innerHTML=a；b=0}catch{}b&&this.empty.appenda}，null，a，arguments.length}

此文本应更改如下内容：

$(document).ready(function () {

    $(".nav").on('click', function() {
       $("#text").html( $(this).html() ); // Getting too nested here 
    }

}

啊，从我之前做的一件事来看，有人建议我不要使用innerHTML或文本，而只使用html。通过使用innerHTML，它可以工作，但返回未定义，当将$this更改为this时，它可以完美地工作。我很欣赏上面的解释，我更愿意了解为什么有些地方出了问题，然后用我自己的代码替换正在工作的代码。我以前从未将innerHTML用作函数，只是用它来更改某些内容中的数据。简单的事情总能让我明白，再次感谢。根本不用$document为什么？授权有什么问题？你不知道是否会增加更多的导航。vanilla JS/getElementById很好，您不需要对所有内容都使用jQuery…只是一种偏好。另外，如果您使用委派和添加更多“.nav”元素，会有什么不同？事件句柄不会也附加到新元素吗？不会，如果使用$'.nav'，只有DOMReady中存在的.nav元素才会附加事件处理程序。但是上面的代码是作为$document.ready的回调执行的，因此它会将事件处理程序附加到所有.nav事件？当前存在的所有nav事件。如果在之后添加了更多，则不会附加事件处理程序。事件处理程序将不会附加到DOMReady之后创建/插入的新元素。