如何使用jquery mobile将页面幻灯片添加到动态创建的列表中？

Question

Here is my html for my populated listview. I have the link grabbed from the php script aswell. Where would i put the page slide function on click event. It wont allow me to but html in the script

   <div data-role="content">
<script type="text/javascript">
                            $(document).on("pagebeforeshow", "#index1", function() {
                                $(function(){
                                    var items="";
                                    $.getJSON("check-events.php",function(data){
                                    $.each(data,function(index,item) 
                                    {
                                    items+="<li><a href="+item.col1+"?eventid="+item.id+">"+item.col2+"<p></p><p>"+item.col3+"</p></li>";
                                     });






                                    $("#contacts").append(items); 
                                     $("#contacts").listview("refresh");
                                    });
                                });
                            });  
                        </script>

            <div data-role="fieldcontain">
                        <ul id="contacts" data-role="listview" data-divider-theme="b" data-inset="true">
                     <li data-role="list-divider" role="heading">
                 List view
                </li> 
            </ul>
            </div>

Where would i add this piece this code. It keeps producing an error when i add it like this

items+="<li><a href="+item.col1+"?eventid="+item.id+" data-transition="slide">"+item.col2+"<p></p><p>"+item.col3+"</p></li>";

Any ideas

Working solution php

$data = array();
        while($rowa = mysql_fetch_array($a, MYSQL_ASSOC)) 
            { 
            $row_array['id'] = $rowa['eventid'];
            $row_array['col1'] = "index.html";
            $row_array['col2'] = $rowa['eventname'];
            $row_array['col3'] = date("D jS F Y",strtotime($rowa[enddate]));
            $row_array['col4'] = "slide";
            array_push($data,$row_array);

            }
        echo json_encode($data);
}

changed html

items+="<li><a href=\""+item.col1+"?eventid="+item.id+"\" data-transition=\""+item.col4+"\">"+item.col2+"<p></p><p>"+item.col3+"</p></li>";});

Answer 1

You need to escape your quotes when putting in the variables (\")

items+="<li><a href=\""+item.col1+"?eventid="+item.id+"\" data-transition=\""slide"\">"+item.col2+"<p></p><p>"+item.col3+"</p></li>";

But, on a side note, you should be letting JQuery create your elements for you. See: https://stackoverflow.com/a/4158203/1178781