Codeigniter jquerytools накладывается на динамический контент

Question

Я немного новичок в jquery tools и javascript в общем. Я пытался гуглить / искать в этом форуме, но я, вероятно, не знаю точно, что искать. Дело в том: У меня есть страница с вкладками. Внутри одной вкладки, когда кнопка нажата в зависимости от введенного текста, она перечисляет некоторые записи Грузы с использованием

myUrl = 'admin / listusers /' + mySearch + '/' + pageNr + '/';

        $("#userlist").html("<b>Loading user list...</b>"); 
        $("#userlist").load(myUrl); 

загруженный контент содержит ссылки, которые будут открыты в оверлее.

Я попытался поместить оверлейный код во все 3 местоположения (html главной страницы, html внутренней вкладки, сам динамический контент), он все еще не работает, он просто открывает ссылки в том же окне, как обычные.

Динамический контент также содержит другую функцию javascript, и она работает (используется для разбиения на страницы onclick = "pagepress (PageNr):

функция pagepress (pageNr) { searchstring = document.getElementById ('searchstring');

        if (searchstring.value != '') { 
            mySearch = searchstring.value; 
        } else { 
            mySearch="0"; 
        } 

        myUrl = 'admin/listusers/' + mySearch +'/'+ pageNr +'/'; 

        $("#userlist").html("<b>Loading user list...</b>"); 
        $("#userlist").load(myUrl); 
    } 

Что может быть не так? Или, может быть, кто-то может дать мне совет, что искать?

Спасибо

Answer 1

Это то, что я сделал, чтобы решить мою проблему

<script>
    $(function () {
        var overlayElem;
        $("a.overlayLink").live("click", function (e) {
            e.preventDefault();
            overlayElem = $(this);
            overlayElem.overlay({ mask: 'lightgray', effect: 'apple',
                onBeforeLoad: function () {
                    //do something on load
                },
                onClose: function () {
                    //do something on close
                },
                load: true
            });
        });


        $("#save").click(function () {
            //do something
            $.ajax({
                type: "POST",
                url: "some service",
                data: "{some data}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    //do something when success
                    overlayElem.overlay().close();
                },
                failure: function (msg) {
                    //do something when fail
                }
            });
        });
    });
</script>

Я надеюсь, что это поможет кому-то еще =)

Answer 2

HTML, который загружается динамически, это:

<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>

/ * использовать полупрозрачное изображение для наложения * /

наложение {

/* initially overlay is hidden */
display:none;

/* growing background image */
background-image:url(http://flowplayer.org/tools/img/overlay/white.png);

/* 
    width after the growing animation finishes
    height is automatically calculated
*/
width:600px;        

/* some padding to layout nested elements nicely  */
padding:35px;

/* a little styling */  
font-size:11px;

}

/ * контейнер для внешнего контента. при необходимости использует вертикальную полосу прокрутки * / .contentWrap { Высота: 460 пикселей; ширина: 600px; Переполнение-у: авто; }

                    <!-- the external content is loaded inside this tag --> 
                    <div class="contentWrap"></div> 

                </div>

$ (function () {

// if the function argument is given to overlay, 
// it is assumed to be the onBeforeLoad event listener 
$("a[rel]").overlay({ 

    expose: 'darkred', 
    effect: 'default', 

    onBeforeLoad: function() { 

        // grab wrapper element inside content 
        var wrap = this.getContent().find(".contentWrap"); 

        // load the page specified in the trigger 
        wrap.load(this.getTrigger().attr("href")); 
    } 

}); 

});

function pagepress(pageNr) {
        searchstring = document.getElementById('searchstring');

        if (searchstring.value != '') {
            mySearch = searchstring.value;
        } else {
            mySearch="0";
        }

        myUrl = 'admin/listusers/' + mySearch +'/'+ pageNr +'/';

        $("#userlist").html("<b>Loading user list...</b>");
        $("#userlist").load(myUrl);
    }


<div id="pages">1 | <a href="http://localhost/~olegas/xxx/index.php" onclick="pagepress(1);return false;">2</a> | <a href="http://localhost/~olegas/xxx/index.php" onclick="pagepress(2);return false;">3</a> | </div>

<div id="admin-user-table">
     <table width="100%"  border="0" cellspacing="0" cellpadding="0" style="text-align:center;">

EditLoginEmailПервое имяПоследнее имяИмя компанииТелефонВалютаСтрана

<tr class="left-table-border"><td><a href="http://localhost/~olegas/xxx/index.php/admin/edit_user/1" rel="#overlay">Edit</a></td><td>admin</td>td>admin@localhost.com</td><td></td><td></td><td></td><td></td><td></td>td></td></tr>