使用jquery .load（）函数从PHP文件加载图像时，jQuery Drag＆Drop无法正常工作

Question

i have a tabbed box with two tabs, one that contains "characters" and one that contains "weapons". if i load the images into their respective containers using PHP directly inside my HTML, the images drag fine, but i can't get both containers to load their contents; it only loads the contents retrieved by the first instance of PHP code. when i put the respective codes into separate php files and use .load(), though, the contents load fine, but are no longer draggable.

HTML for the tab box:

<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 script to make the tabs work:

$(".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 draggable (currently only for "characters" tab):

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

PHP for loading images:

    <?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>';                                                                         
    }
?>

Answer 1

nevermind, my bad, i figured it out just a few minutes after posting this. both

$('#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)

work.