Question

我正在使用jQuery mobile。我想要做的是当用户点击<li>元素时，它将他转移到链接页面，然后显示一个警告，其中包含他点击的列表元素的文本。不幸的是，我在这里的实现只显示一个空的警告框

<script>
var course;

$('body').on('click','.hello',function(){
    course = $(this).text();

});

    function loadCourse(){

    alert(course);

    $.get(
        "getCourses.php?course="+course,
        function( data ){
            $('#list1').html( data )
            .listview( 'refresh' );
        }
        );      
    }

$(function(){
  $( ":mobile-pagecontainer" ).on( "pagecontainershow", function( event, ui ) {
    if(window.location.href.indexOf('#page1') !== -1){
      loadCourse();

    }
  });
});

</script>
<div data-role="page" id="abc">
    <ul data-role="listview" data-theme="a" data-split-theme="b" data-split-icon="plus" data-inset="true">
    <li class="hello"><a href="#page1">Hello World</a></li>
    <li class="hello"><a href="#page1">Bye Bye</a></li>
    </ul>
</div>
<div data-role="page" id="page1">
    <ul data-role="listview" data-theme="a" data-split-theme="b" data-split-icon="plus" data-inset="true" id="list1">
    </ul>   
</div>

Answer 1

您的提示框为空，因为可变课程没有价值！

<强>为什么吗

点击链接后，您的页面会重新加载。然后，课程变量为空，因为不会为下一个请求存储变量值。 HTTP是无状态的！

怎么做？ 您的页面不应重新加载。尝试类似：

$('li').click(function(e){
    alert($(this).html());
    return false;

});

Answer 2

course = $(this).find("a").text();

Answer 3

你可以使用＆＃34;这个＆＃34;得到正确的参考。

$(function(){
    $('li').click(function(e){
        alert($(this).text());
    });
});

的jsfiddle： http://jsfiddle.net/CMt9h/3/

您还可以使用event参数来获取目标：

$(function(){
    $('li').click(function(e){
        alert($(e.target).text());
    });
});

的jsfiddle： http://jsfiddle.net/CMt9h/4/

Answer 4

正如AndiPower所说，由于页面重新加载，课程变量为空。如果您希望重新加载此页面，但仍希望在下一页上显示所选值，则可以执行以下操作：

将值提交给服务器并将其加载到js ready
将其作为url参数添加到href并在js ready中读取
将其存储在Cookie中

需要在jQuery中获取元素的文本值

4 个答案: