$() 函数未按预期工作

Posted

技术标签:

【中文标题】$() 函数未按预期工作【英文标题】:$() function not working as intended 【发布时间】:2018-02-01 04:34:03 【问题描述】:
function drag_drop(event) 
    event.preventDefault(); /* Prevent undesirable default behavior while dropping */
    var elem_id = event.dataTransfer.getData("text");
    event.target.appendChild( document.getElementById(elem_id) );
    $('#app_status').innerhtml = "Dropped "+elem_id+" into the "+event.target.getAttribute('id');
    document.getElementById(elem_id).removeAttribute("draggable");
    document.getElementById(elem_id).style.cursor = "default";
    droppedIn = true;

这个函数工作正常,但是当我用 jQuery 的 $() 方法而不是 document.getElementById 更新它时,它会报错:

index.js:22 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at drag_drop (index.js:22)
    at HTMLDivElement.ondrop (index.html?_ijt=ifai0ih42qnjkillablo2ulcln:15)

更新后的函数如下所示:

function drag_drop(event) 
    event.preventDefault(); /* Prevent undesirable default behavior while dropping */
    var elem_id = event.dataTransfer.getData("text");
    event.target.appendChild( $('#' + elem_id) );
    $('#app_status').innerHTML = "Dropped "+elem_id+" into the "+event.target.getAttribute('id');
    $('#' + elem_id).removeAttribute("draggable");
    $('#' + elem_id).style.cursor = "default";
    droppedIn = true;

【问题讨论】:

$("#app_status").html("Dropped " ... ) — 你应该找到一本基本的 jQuery 书籍或教程。 好像你在混合jqueryvanilla js app_status 是元素的 id,其中 elem_id 是包含 id 的变量 $() 返回一个 jQuery 对象,而不是一个元素。您可以从对象中get to the element(s),但我个人怀疑您是否应该这样做。为什么用一段既长又复杂但还需要一个厚库的代码来代替一段完美工作的纯 javascript 您将需要的唯一 jQuery 参考 ---> api.jquery.com 【参考方案1】:

根据jQuery,您的代码几乎没有更改

function drag_drop(event) 
   event.preventDefault(); /* Prevent undesirable default behavior while dropping */
   var elem_id = event.dataTransfer.getData("text");
   event.target.appendChild( $('#' + elem_id) );

   // ---- **Updated Code**
   $('#app_status').html("Dropped "+elem_id+" into the "+event.target.getAttribute('id'));
   $('#' + elem_id).removeAttr("draggable");
   $('#' + elem_id).css(cursor: "default");


   droppedIn = true;

【讨论】:

您的应用程序中是否包含jQuery 任何版本???如果没有,则包括<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 已添加 @AhtishamShahid 。你能解释一下你想在这里做什么event.target.appendChild( $('#' + elem_id) );

以上是关于$() 函数未按预期工作的主要内容,如果未能解决你的问题,请参考以下文章

Pyspark 轮函数未按预期工作

jquery 中的 next() 函数未按预期工作

SQL Server STRING_AGG 函数排序未按预期工作

无法从异步函数获取返回值,等待未按预期工作(Vue API 服务)

Django 1.11:模板中的 URL 函数未按预期工作

选择内部功能未按预期工作