即使在页面回发后如何使jQuery点击事件持续存在答案

【问题标题】：How to make a jQuery click event persist even after page post back即使在页面回发后如何使jQuery点击事件持续存在
【发布时间】：2011-04-20 06:42:15
【问题描述】：

我有一个点击处理程序，它可以展开和折叠树视图，我想要一些机制，在回发后，展开/折叠的同一节点应该保持原样。 HTML：

 <ul>
        <li>Africa
            <ul>
                <li>Egypt</li>
            </ul>
            <ul>
                <li>SA</li>
            </ul>
        </li>
        <li>Asia
            <ul>
                <li>India</li>
                <li>China</li>
                <li>Japan</li>
            </ul>
        </li>
        <li>Europe
            <ul>
                <li>UK</li>
                <li>France</li>
                <li>Germany</li>
            </ul>
        </li>
        <li>America
            <ul>
                <li>US</li>
                <li>Mexico</li>
                <li>Argentina</li>
            </ul>
        </li>
    </ul>

jQuery:

$(function () {
    $('li:has(ul)')
    .click(function () {

            var that = this;
            $('li:has(ul)').children().filter(':visible').parent().each(function (x) {
                if (this != that)
                    toggle(this);
            });
            toggle(this);

    })
    .children().hide();

    $('li:not(:has(ul))').css({ cursor: 'default', 'list-style-image': 'none' });
});

任何帮助表示赞赏！

【问题讨论】：

是什么意思？？即使刷新了表格？？你想让视图保持它的位置吗？
我认为你应该为此使用服务器端变量，编写一个条件循环并设置一些标志
是的，我希望视图保持其位置..

标签： jquery postback

【解决方案1】：

您可以尝试在您的 url 之后对 url 进行编码，只需添加 # 和应显示的字段喜欢

http://stackoverflow.com/questions/5727626#field1;field

或

  http://example.com/your_action#field1;field

解析网址之后

var fields = window.location.href.slice(window.location.href.indexOf('#') + 1).split(';');

您将有要显示的字段

展开和折叠都需要以#结尾的url打开；

编辑

这里是如何做到这一点： Demo

<ul>
    <li id='1'>Africa
        <ul>
            <li>Egypt</li>
        </ul>
        <ul>
            <li>SA</li>
        </ul>
    </li>
    <li id='2'>Asia
        <ul>
            <li>India</li>
            <li>China</li>
            <li>Japan</li>
        </ul>
    </li>
    <li id='3'>Europe
        <ul>
            <li>UK</li>
            <li>France</li>
            <li>Germany</li>
        </ul>
    </li>
    <li id='4'>America
        <ul>
            <li>US</li>
            <li>Mexico</li>
            <li>Argentina</li>
        </ul>
    </li>
</ul>

Javascript

$(function () {

    $('li:has(ul)')
    .click(function () {

           var that = this;

        $('li:has(ul)').children().filter(':visible').parent().each(function (x) {
                if (this != that)
                    toggle(this);
            });
            $(this).children().toggle();
        if (window.location.href.indexOf('#')>0){
          var href = window.location.href.slice(0,window.location.href.indexOf('#'));
        }else{
            var href = window.location.href
        }

       var ids ='' 

        $('li:has(ul:visible)').each(
            function(){
              ids=ids+$(this).attr('id')+';'
            }
        );     

          window.location =  href +'#'+ids;
    })
    .children().hide();

    $('li:not(:has(ul))').css({ cursor: 'default', 'list-style-image': 'none' });
    var fields = window.location.href.slice(window.location.href.indexOf('#') + 1).split(';');

        for (var i in fields){
        $('li#'+i).children().toggle();
        }
});

【讨论】：