$() 函数未按预期工作

Posted 2023-05-07

【中文标题】$() 函数未按预期工作

【英文标题】：$() 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 书籍或教程。

好像你在混合jquery和vanilla 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) );