將jQuery應用於php回顯的元素

Question

編輯：問題是由加載不正確的JQUERY庫引起的，這個問題在我的原始問題中並未明確提出。 道歉。

我使用jquery隱藏，發布，然后將php查詢的結果回顯到兩個單獨的div。 然后，我希望能夠在這些div之間交換結果圖像。 第一部分工作正常，但我無法在這些div上使用任何其他jquery腳本（例如，sortable，droppable等）。

在過去的幾周內，我是腳本的新手。 我認為我需要先對php內容進行json編碼，然后再發送，但是我很難在網上找到有關如何執行此操作的明確指南。 任何幫助，無論是描述性的，引薦到特定的介紹性資源（例如，不是php.net）還是代碼本身，都應得到贊賞。

我在下面包括相關腳本。 這個作品：

<script type='text/javascript'> 
$(document).ready(function(){ 
$("#search_results").slideUp(); 
    $("#search_button").click(function(e){ 
        e.preventDefault(); 
        ajax_search(); 
    }); 
    $("#search_term").keyup(function(e){ 
        e.preventDefault(); 
        ajax_search(); 
    });    
}); 

function ajax_search(){     
  $( "#search_results").show(); 
  var search_val = $("#search_term").val();
  var search_valb = $("#search_theme").val(); 
  $.post( "./find.php", {search_term : search_val, search_theme : search_valb}, function(data){
       if (data.length>0){ 
         $( "#search_results").html(data);  
         $( ".portfolio_container").hide();
         $( ".portfolio_draggables").hide();
         $( "ul.clickable_container li").click(function(){
             $( ".portfolio_draggables").hide();
             var activeImage = $(this).find("a").attr('href'); 
             $( ".portfolio_container").show();
             $( activeImage).show(); 
             return false;           
        });  

       };
   });
};
</script>

這是我正在使用的html表單。

<div id="lettersearchform" class = "lettersearchform">
        <form id="searchform" method="post">          
        <label for="search_term">Enter your word here!</label> 
        <input type="text" name="search_term[]" id="search_term" /> 
        <!--<input type="submit" value="search" id="search_button" />-->
        </form> 
</div>     

<div id="search_results"></div>

使用以下腳本成功生成了“ search_results”：

$alpharray = array();
    while($row = mysqli_fetch_assoc($result)){      
        $alpharray[$row['letter']][] = $row;
    }

$first = $second = array();
foreach( str_split( $_POST['search_term']) as $alpha)
{ 
    $first[] = "<li><a href = '#$alpha'><img class='imgs_clickable_droppable' img src='../Letterproject/images/{$alpharray[$alpha][0]['photoPath']}' width='100' height='140'></src></a></li>";
    $editable = array("<div id='$alpha' class='portfolio_draggables'>");
    foreach ($alpharray[$alpha] as $tempvar)
    {                                              
         $editable[] = "<a href ='findall.php'><img src='../Letterproject/images/{$tempvar['photoPath']}' width='70' height='110'></src></a>";                                                         
    }   
    $editable[] = '</div>';
    $second[] = implode( '', $editable);
}

    echo '<ul id = "clickable" class="clickable_container">';
        echo implode( '', $first);
        echo '</ul>';


    echo '<div id="portfolio" class = "portfolio_container">';
        echo implode( '', $second);
    echo '</div>';

所以這里是問題所在：這種可排序的腳本比我想要的跨div更為受限制，但是這種類型的東西行不通。

$(function() {

    $("ul.clickable li").draggable({
        containment: 'parent',
        revert: 'invalid',
        opacity: '0.91',
        cursor: 'crosshair'
    });
    $('.clickable').sortable();
}); 

對於那些對更多上下文感興趣的人，我正在使用jquery從表單發布輸入。 Php腳本將輸入的字符與mysql db中對應的字母圖像匹配。 然后，它將這些圖像的列表回顯到一個div，並將該字母的所有圖像的整個組合反射到另一個div。 這個想法是用戶可以從第二個輸出中拖動圖像來替換另一個div中的字母圖像。

非常感謝！

Answer 1

$("ul.clickable li") 

不能正確選擇HTML ID為clickable且元素為clickable容器的元素。 更改元素的類（在jQuery / CSS中用。選擇）或id（用＃選擇）

$("#clickable")

應該管用。

另外，/ src是不必要的，因為src不是標簽。 用PHP腳本直接寫出HTML並不是最干凈的方法。 我強烈建議您查看Head First HTML / CSS或HF HTML5 ，以加深您的理解。