IE7 / 8中的问题jquery嵌套可排序列表

时间:2010-12-30 19:51:26

标签: jquery-ui jquery-ui-sortable

我遇到与此主题相同的问题

jQuery unexpected sortable behaviour

我的系统做同样的事情。我的代码和他的代码之间的唯一区别是我的代码100%由ajax动态生成,并且我将表插入到每个LI中,但结果是相同的。这是我的每个主列表条目的html im插入。

这是我的html中的空白列表

<ul id=\"questionList\">

  </ul>

这是由javascript和ajax调用生成的

<li id="liName-11" class="ui-state-default">
  <table width="600" border=".5" cellspacing="2" cellpadding="2" class="singleBorder">   
    <tr>
      <td width="386" align="left" valign="top">
        <span id="quesEditText-11">Does Default Work
        </span>
        <table>
          <tr>
            <td>
              <span id="quesEditSpan-11" onclick="setEditField('ques', 11)">Edit
              </edit>
            </td>
            <td>
              <span id="quesUpdateSpan-11" onclick="updateQuestionCall('ques', 11)">Update
              </edit>
            </td>
            <td>
              <span id="deleteSpan-11" onclick="deleteQuestionAjax(11)">Delete
              </edit>
            </td>
          </tr>
        </table>
      </td>     
      <td width="200">
        <input type="text" id="answerBox11">
        <br>
        <a href="#" onclick="insertAnswer(11, 'answerBox11')">Insert Answer
        </a>
        <ul id="answerList-11">
          <li id="17">
            <span id="answEditText-17">lets try this answer
            </span>
            <table>
              <tr>
                <td>
                  <span id="answEditSpan-17" onclick="setEditField('answ', 17)">Edit
                  </edit>
                </td>
                <td>
                  <span id="answUpdateSpan-17" onclick="updateQuestionCall('answ', 17)" style="display:none;">Update
                  </edit>
                </td>
                <td>
                  <span id="deleteSpan-17" onclick="deleteAnswerAjax(17)">Delete
                  </edit>
                </td>
              </tr>
            </table>
          </li>
          <li id="13">
            <span id="answEditText-13">yet another question
            </span>
            <table>
              <tr>
                <td>
                  <span id="answEditSpan-13" onclick="setEditField('answ', 13)">Edit
                  </edit>
                </td>
                <td>
                  <span id="answUpdateSpan-13" onclick="updateQuestionCall('answ', 13)" style="display:none;">Update
                  </edit>
                </td>
                <td>
                  <span id="deleteSpan-13" onclick="deleteAnswerAjax(13)">Delete
                  </edit>
                </td>
              </tr>
            </table>
          </li>
        </ul>
      </td>   
    </tr> 
  </table>
</li>

在上述帖子中提出建议,我已将其建议修改为此

$("ul.list").live("mousedown", function(e){
        e.stopPropagation();
    });

但它没有效果。在chrome和firefox中完美运行,但在IE中搞砸了。相信我即将放入一个脚本,如果他们在IE中看到它将它们转发到Firefox并告诉他们下载一个真正的浏览器,但我的老板不喜欢这个想法。你们有什么想法吗?

2 个答案:

答案 0 :(得分:1)

  1. 确保您的HTML有效:您正在使用<span>
  2. 关闭</edit>个元素
  3. 您的脚本适用于具有ul类的list元素,您未在HTML中的任何位置定义。

答案 1 :(得分:0)

http://api.jquery.com/event.stopPropagation/

你会在这个页面上注意到live()在事件已经传播到文档顶部之后处理它,所以你需要使用bind()而不是live()。