Question

我可以很好地导航到页面，所有其他AJAX jQuery的东西都在工作。

我在页面上有一个div可折叠的集合。在每个可折叠元素的标题中，我有一些spans来控制每个可折叠元素的div标题中的布局。

所以PSEUDO布局看起来像。

DIV -> Collapsible set
DIV -> Collapsible
   H4 -> Header info
       SPAN -> For a button to to the right of the header This span as an onclick in it with the following instructions:
        onclick=" //event.stopPropagation();
     window.ordselect = $(this).parents(\'.parentorder\'); 
     $(\'.choosebutton\').css(\'color\',\'black\');
      $(this).css(\'color\',\'red\');
      ">Choose</SPAN>';

我放入stopPropogation，以便点击span时，它不会打开或关闭周围的div。

我现在所学到的实际上是将页面重置回应用程序的原始页面。如果我删除了stopPropogation，我会得到所需的结果，但会打开折叠的div。

这是代码的实际部分。这些项目没有附加其他事件：

我认为它与A标签有关，如果我停止传播，它只是考虑它是一个链接，因此改变页面。

 <div data-role="collapsible-set" data-mini="true" data-content-theme="c" class="ui-collapsible-set ui-corner-all">

   <div id="ord1" class="parentorder ui-collapsible ui-collapsible-inset ui-collapsible-themed-content ui-first-child" data-role="collapsible">

       <h4 class="ui-collapsible-heading">
       <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-mini ui-btn-icon-left ui-btn-up-c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="plus" data-iconpos="left" data-theme="c" data-mini="true">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">
               #:1<br>to: SYSCO by: Full Admina<br>@ 2013-11-22 00:00:00
    <span style="float:right;font-size:.7em;padding:3px" class="ui-btn-down-c ui-btn-corner-all">0</span>
    <span style="float: right; font-size: 0.7em; padding: 3px; color: red;" class=" choosebutton ui-btn-down-c ui-btn-corner-all" onclick=" //event.stopPropagation();
     //window.ordselect = $(this).parents('.parentorder'); 
     $('.choosebutton').css('color','black');
      $(this).css('color','red');
      ">Choose</span>
      <span style="float:right;font-size:.7em;padding:3px" class="ui-btn-down-c ui-btn-corner-all">OPEN</span>
      <span class="ui-collapsible-heading-status"> click to collapse contents</span></span>
      <span class="ui-icon ui-icon-shadow ui-icon-minus">&nbsp;</span></span></a></h4>
      <div class="ui-collapsible-content ui-body-c" aria-hidden="false"><p id="orditems1" class="gradientbackground" style="font-size:.8em;border:1px solid green;padding:5px;margin:0px;color:white;text-align:center">ITEMS</p></div></div><div id="ord2" class="parentorder ui-collapsible ui-collapsible-inset ui-collapsible-themed-content ui-last-child ui-collapsible-collapsed" data-role="collapsible"><h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed"><a href="#" class="ui-collapsible-heading-toggle ui-btn ui-mini ui-btn-icon-left ui-btn-hover-c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="plus" data-iconpos="left" data-theme="c" data-mini="true"><span class="ui-btn-inner"><span class="ui-btn-text">#:2<br>to: SYSCO by: Full Admina<br>@ 2013-11-23 00:00:00<span style="float:right;font-size:.7em;padding:3px" class="ui-btn-down-c ui-btn-corner-all">0</span><span style="float: right; font-size: 0.7em; padding: 3px; color: black;" class=" choosebutton ui-btn-down-c ui-btn-corner-all" onclick=" //event.stopPropagation();
     //window.ordselect = $(this).parents('.parentorder'); 
     $('.choosebutton').css('color','black');
      $(this).css('color','red');
      ">Choose</span>
      <span style="float:right;font-size:.7em;padding:3px" class="ui-btn-down-c ui-btn-corner-all">OPEN</span>
      <span class="ui-collapsible-heading-status"> click to expand contents</span>
     </span>

    <span class="ui-icon ui-icon-shadow ui-icon-plus">&nbsp;</span></span></a>

项

jQuery event.stopPropagation导致页面发生变化

0 个答案: