使用 jquery .load() 函数从 PHP 文件加载图像时，jQuery 拖放不起作用答案

【问题标题】：jQuery Drag & Drop not working when loading images from PHP file with jquery .load() function使用 jquery .load() 函数从 PHP 文件加载图像时，jQuery 拖放不起作用
【发布时间】：2017-11-25 23:38:29
【问题描述】：

我有一个带有两个选项卡的选项卡框，一个包含“字符”，一个包含“武器”。如果我直接在我的 HTML 中使用 PHP 将图像加载到它们各自的容器中，图像会很好地拖动，但我无法让两个容器都加载它们的内容；它只加载第一个 PHP 代码实例检索到的内容。但是，当我将各自的代码放入单独的 php 文件并使用 .load() 时，内容加载正常，但不再可拖动。

标签框的 HTML：

<div class="tabBox">
    <ul class="tabs">
        <li class="card-gallery" active>Cards</li>
        <li class="weapon-gallery">Weapons</li>
    </ul>
    <div class="tabContainer">
        <div id="card-gallery" class="tabContent">
        </div>

        <div id="weapon-gallery" class="tabContent">
        </div>
    </div>
</div>

让标签工作的jQuery脚本：

$(".tabContent").hide();
$('#card-gallery').load('cardgallery.php');
$('#weapon-gallery').load('weaponsgallery.php');

$(".tabContent").eq(0).show();
$(".tabs li").on('click', function(event) {
    var showTab = $(this).attr('class')
    if (showTab == 'card-gallery') {
        $('.tabContent').hide();
        $('#card-gallery').show();
        $(this).siblings().removeAttr('active');
        $(this).attr('active',true);
    } else if (showTab == 'weapon-gallery') {
        $('.tabContent').hide();
        $('#weapon-gallery').show();
        $(this).siblings().removeAttr('active');
        $(this).attr('active',true);
    }
});

jQuery 可拖动（目前仅适用于“字符”选项卡）：

$("#card-gallery .draggable").draggable({
    containment: "document",
    helper: "clone",
    appendTo: 'body',
    scroll: false
});

用于加载图像的 PHP：

    <?php
        $db = new mysqli("localhost", "____", "____", "builder")
            or die('Error connecting to MySQL server.');

        $result = mysqli_query($db, 'SELECT id, i_card_type, name, i_character,
        i_rarity, i_weapon, image, special_icon
        FROM card_data
        LIMIT 1,200');

        $i=0;

        while ($row = mysqli_fetch_array($result, MYSQLI_NUM)) {
            if (strpos($row[2], '(') !== false) {                                                                   
                $cardtitle = preg_split("/(【|】|\(|\))/u", $row[2]);                                                 
            } else {                                                
                $cardtitle = preg_split("/(【|】)/u", $row[2]);                                                       
            }

            if ($i++ % 3 == 0) echo '<div class="row">';            
                echo '<div class="card-box">';                      
                    echo '<div id="' . $row[0] . '" class="draggable" 
                    data-card-type="' . $row[1] . '"data-cid="' . $row[3] . '" 
                    data-wid="' . $row[5] . '" data-rarity="' . $row[4] . '">';
                        echo '<div class="icon-box">';                                                              
                            echo '<div class="invalid-card-text"></div>';                                           
                                echo '<div class="icon-image">';                                                    
                                    echo '<img src="' . $row[6] . '" />';                                               
                                    if ($row[7] != 'NULL') {
                                    echo '<img class="sicon" src="' . $row[7] . '" />';
                                    }
                                    echo '<img class="wicon" src="weapons/img/type/' . $row[5] . '.png" />';
                                echo '</div>';
                            echo '</div>';
                        echo '</div>';
                    echo '<p class="card-name">';                                                                   
                        echo '【<b>' . $cardtitle[1] . '</b>】';                                                      
                        echo '<br />';
                        echo $cardtitle[2];                                                                         
                        if (strpos($row[2], '(') !== false) {   
                            echo '<br />';
                            echo '<p class="small">( ' . $cardtitle[3] . ' )</p>';                              
                        }
                    echo '</p>';
            echo '</div>';
        if ($i % 3 == 0) echo '</div>';                                                                         
    }
?>

【问题讨论】：

标签： php jquery jquery-ui

【解决方案1】：

没关系，我的错，我在发布后几分钟就想通了。两者都有

$('#card-gallery').load('cardgallery.php', function() {
    $('.draggable').draggable({
        containment: "document",
        helper: "clone",
        appendTo: 'body',
        scroll: false
    });
});

function allowDrag() {
    $('.draggable').draggable({
        containment: "document",
        helper: "clone",
        appendTo: 'body',
        scroll: false
    });
}

$('#card-gallery').load('cardgallery.php', allowDrag)

工作。

【讨论】：