Question

我刚开始使用jquery mobile但是有jquery和javascript的经验，我似乎遇到了刷新，未加载或加载到DOM中的困难。

基本上我有一个2页的文档，其中包含各自的点击和更改事件。在第1页和第2页上，点击事件调用已加载到文档头部的相同功能。我没有遇到没有被调用的函数的问题我的问题在于函数，它似乎与加载的DOM有关。

这是功能：

function changeStatus(e) {
        fstatus=$("#"+e).prop('title');
        sID=$("#"+e).attr('rel');

        if (fstatus == 'Pass') {
            fstatus = 'Fail';

            $("#studentColor_"+sID).css("background-color","#FCD1C5").css("border-color","#900");
            $("#studentList"+sID+"_link").css("background-color","#FCD1C5");

        } else if (fstatus == '') {

            fstatus = 'Pass';
            $("#studentColor_"+sID).css("background-color","#C5FCC5").css("border-color","#248703");
            $("#studentList"+sID+"_link").css("background-color","#C5FCC5");

        } else if (fstatus == 'Fail') {

            fstatus = '';
            $("#studentColor_"+sID).css("background-color","#FFF").css("border-color","#FFF");
            $("#studentList"+sID+"_link").css("background-color","#FFF");

        }

    $("#studentList"+sID+"_link").prop("title",fstatus);
    $("#studentColor_"+sID).prop("title",fstatus);

    }

第一次进入第1页时，点击事件正常触发，所有css样式都正确更改。转到第2页，事件会触发但是没有任何css样式可以工作，但它会正确设置标题。回到第1页，现在它的行为与第2页上的相同。

所以根据我的理解..在初始页面加载为1时，第2页不在DOM中，因此$("#studentList"+sID+"_link")不存在但功能完全正常。移至第2页后，$("#studentList"+sID+"_link")确实存在且可见，并且第1页中加载的$("#studentColor_"+sID)仍在DOM中。（这不是单页应用程序）

这是对的吗？

如果因为其中一个元素不再存在而发生错误，那么即使在第1页的初始页面加载时该函数也无法正常工作？（因为第2页上的元素尚未加载）

此外，它在浏览器上完全正常，但在移动设备上时风格停止工作。

似乎唯一搞乱函数的是css（）调用。我希望我的解释是有道理的，因为它让我感到困惑。

感谢您的帮助。

根据要求提供的其他信息：它是2个HTML文档。两者都生成了一些PHP。

以下是第1页上元素的生成方式:(当然我删除了sql调用等）

while($row = mysql_fetch_array($result))
{           

if ($row['passFail'] == '') {
    $completionStatus='';
} else if ($row['passFail'] == 'P') {
$completionStatus='Pass';   
} else if ($row['passFail'] == 'F') {
$completionStatus='Fail';   
}

        if ($completionStatus=='Pass') {
            $bordercolor="#248703";
            $backgroundcolor='#C5FCC5';
        } else if ($completionStatus=='Fail') {
            $bordercolor="#900";
            $backgroundcolor='#FCD1C5';
        } else if ($completionStatus == '') {
            $bordercolor="#CCC";
            $backgroundcolor='#FFF';
        }
echo '<div class="draggable" style="text-align:center; width:50px; position:relative; font-size:.7em; top:'.$row['studentY'].'px; left:'.$row['studentX'].'px;" title="'.$completionStatus.'" rel="'.$row['ID'].'" id="student_'.$row['ID'].'"><div class="round shadow draggable_student" id="studentColor_'.$row['ID'].'" style="position: relative; background-color:'.$backgroundcolor.'; border:1px solid '.$bordercolor.'; margin-left:auto; margin-right:auto; margin-bottom:3px; width:40px; height:35px; padding:0px; font-weight:bold; text-align:center; padding-top:5px; vertical-align:middle; cursor:pointer;" title="'.$completionStatus.'"></div>'.$row[$_SESSION['student_identifier']].'</div>';
}

以下是它们如何加载到第2页：

while($row = mysql_fetch_array($result))
{           

if ($row['passFail'] == '') {
    $completionStatus='';
} else if ($row['passFail'] == 'P') {
$completionStatus='Pass';   
} else if ($row['passFail'] == 'F') {
$completionStatus='Fail';   
}

        if ($completionStatus=='Pass') {
            $bordercolor="#248703";
            $backgroundcolor='background-color:#C5FCC5;';
        } else if ($completionStatus=='Fail') {
            $bordercolor="#900";
            $backgroundcolor='background-color:#FCD1C5;';
        } else if ($completionStatus == '') {
            $bordercolor="#CCC";
            $backgroundcolor='background-color:#FFF;';
        }
        if ($completionStatus == '') {
            $readonly=' readonly';
        } else {
            $readonly='';
        }
        if ($row['asID']=='') {
            $cc++;
            $row['asID']=time()+$cc;
        }
echo '<li><a href="#" style="'.$backgroundcolor.'" id="studentList'.$row['ID'].'_link"><table cellpadding="0" cellspacing="0" width="100%"><tr><td class="student_infoLink" id="student'.$row['ID'].'_td" title="'.$completionStatus.'" rel="'.$row['ID'].'">'.$row['student_firstName'].' '.$row['student_lastName'].'</td><td align="right" width="10%"><input type="text" placeholder="Score" rel="'.$row['asID'].'" id="student'.$row['ID'].'_score" value="'.$row['score'].'" class="updateOnChange"'.$readonly.'><div style="padding:13px; text-align:center; display:none;"><img src="preloader.gif" width="56" height="21" border="0" /></div></td></tr></table></a><a href="#edit" data-rel="popup" data-position-to="window" data-transition="pop">Edit Student</a></li>';

}

请忽略所有内联样式，因为一旦修复完毕，大多数内容将被删除。

受约束的听众：

$(document).on('pageinit', function () {
    $(function () {
        function tapHandler(event) {
            changeStatus($(this).attr("id"));
        }
        $(".student_infoLink").unbind("tap");
        $(".draggable").unbind("tap");
        $(".draggable").bind("tap", tapHandler);
        $(".student_infoLink").bind("tap", tapHandler);
    });
});

解决方法：

我可以通过以下方式解决此问题...删除对ID的调用并搜索课程。见下文。我仍然会感谢任何帮助，为什么ID调用不起作用。非常感谢Omar的帮助！

function changeStatus(e) {
        fstatus=$(e).prop('title');
        sID=$(e).attr('rel');

        if (fstatus == 'Pass') {
            fstatus = 'Fail';

            $(e).find(".draggable_student").css("background-color","#FCD1C5").css("border-color","#900");
            $("#studentList"+sID+"_link").css("background-color","#FCD1C5");

        } else if (fstatus == '') {

            fstatus = 'Pass';
            $(e).find(".draggable_student").css("background-color","#C5FCC5").css("border-color","#248703");
            $("#studentList"+sID+"_link").css("background-color","#C5FCC5");

        } else if (fstatus == 'Fail') {

            fstatus = '';
            $(e).find(".draggable_student").css("background-color","#FFF").css("border-color","#FFF");
            $("#studentList"+sID+"_link").css("background-color","#FFF");

        }


    $("#student"+sID+"_td").prop("title",fstatus);
    $(e).prop("title",fstatus);

    }

$(document).on('pageinit', function(e) {
console.log("pageinit is fired");
var pagecreated = e.target;



function tapHandler( event ){

changeStatus($(this)); 

}

$(".student_infoLink", pagecreated).unbind("tap");
$(".draggable", pagecreated).unbind("tap");
$(".draggable", pagecreated).bind("tap", tapHandler);
$(".student_infoLink", pagecreated).bind("tap", tapHandler);
});

我现在假设，调用ID是问题所在......有什么原因吗？

Answer 1

快速，简短的回答...在定位元素时使用类而不是id。随着DOM加载多个页面，选择ID可能会有点令人讨厌。请参阅上面编辑的帖子中的解决方法。

在jQuery Mobile单页模型中从第二页导航回第一页后，无法定位ID

1 个答案: