Обработчик onclick, добавленный с помощью jQuery, не работает после первого использования - PullRequest
Новая
       24

Обработчик onclick, добавленный с помощью jQuery, не работает после первого использования

1 голос
/ 15 апреля 2011

Я хочу изменить выделенный текст, нажав кнопку, которая появляется после выделения текста. На первой итерации все работает нормально - текст заменяется по мере необходимости. На второй итерации кажется, что текст оставлен с предыдущей итерации (шаблон не обновляется) и ничего не работает. Не могли бы вы помочь исправить это. Демоверсия ниже.

Я попытался сделать live('click', function ...) вместо click(), чтобы обновить шаблон согласно некоторым потокам здесь, но, похоже, он не работает.

EDIT:

решил включить всю демонстрацию, чтобы сделать ее более понятной: 

<html>

<head>

<title>Border revision</title>

</head>

<body>

<BR />

<h2>Select text in the red square and then click ? button. First time work, second not. Why? </h2>

<div>

some text <span style="border: solid 2px red" class="VAL">try it</span>  some text
second attempt <span style="border: solid 2px red" class="VAL">3</span> doesn't work ;(

<hr><br>

</div>

<hr></br>

<div id="selection-image"></div>

<style type="text/css">

    #show-bubb { background:url(bubble.png) 0 0 no-repeat; width:25px; height:29px; position:absolute; top:-50px; left:-50px; }

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>


<script>
function getSelected() {

    if(window.getSelection) { return window.getSelection(); }

    else if(document.getSelection) { return document.getSelection(); }

    else {
        var selection = document.selection.createRange();
        if(selection.text) { return selection.text; }
        return false;
    }
    return false;
}

function processing() {

    var selectionImage;

    $(document).mouseup(function(e) {

        var selection = getSelected();
        var parent = selection.anchorNode.parentNode;

        if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {

            if(!selectionImage) {
                selectionImage = $('<label>').attr({
                    //~ href: url,
                    title: 'Click here to remove border',
                    //~ target: '_blank',
                    id: 'show-bubb'
            }).hide();

            $(document.body).append(selectionImage);
            }

            selectionImage.css({
                top: e.pageY - 30, //offsets
                left: e.pageX - 13 //offsets
            }).fadeIn();

            selectionImage.click(function() {       
                //parent = selection.anchorNode.parentNode;         
                if (parent == null) {
                    //alert(ZOZO);
                    return "";
                }
                else {      
                    //create a string selected  
                    var text = document.createTextNode(String(selection));
                    //~ alert("before");
                    //alert(String(selection));
                    parent.parentNode.insertBefore(text, parent.nextSibling);
                    parent.parentNode.removeChild(parent);  
                    //~ alert("after");             
                }


            });
        };

    });

$(document.body).mousedown(function() {

    if(selectionImage) { selectionImage.fadeOut(); }

});

};




$(document).ready(function() {

processing();

});




</script>

Есть идеи?

Ответы [ 2 ]

0 голосов
/ 15 апреля 2011

Событие одного клика, переменные передаются selectionImage через данные метода jquery () 

$(document).mouseup(function(e) {

    var selection = getSelected();
    var parent = selection.anchorNode.parentNode;

    if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {

        if(!selectionImage) {
            selectionImage = $('<label>').attr({
                //~ href: url,
                title: 'Click here to remove border',
                //~ target: '_blank',
                id: 'show-bubb'
            }).text('test').click(function() {
                var parent = $(this).data('parent');
                var selection = $(this).data('selection');
                //parent = selection.anchorNode.parentNode;         
                if (parent == null) {
                    //alert(ZOZO);
                    return "";
                }
                else {      
                    //create a string selected  
                    var text = document.createTextNode(String(selection));
                    //~ alert("before");
                    //alert(String(selection));
                    parent.parentNode.insertBefore(text, parent.nextSibling);
                    parent.parentNode.removeChild(parent);  
                    //~ alert("after");             
                }
            }).hide();

        $(document.body).append(selectionImage);
        }

        selectionImage.css({
            top: e.pageY - 30, //offsets
            left: e.pageX - 13 //offsets
        }).fadeIn();
        selectionImage.data({
            selection: selection,
            parent: parent
        });
    };

});
0 голосов
/ 15 апреля 2011
  1. После первой мышки вы создаете элемент selectionImage HTMLElement, и он имеет только одно событие щелчка.
  2. Нажатие на событие выбора вызова selectionImage с parent = first label и удалением first label.
  3. После второй мышки вы создаете еще одно событие щелчка, которое связывается с selectionImage.
  4. Нажав на событие первого клика вызова selectionImage, которое вы создали на первом шаге, родительский элемент не существует (первая метка удалена на шаге 2), поэтому он не имеет значения parentNode. И обработка останавливается.

Основная проблема заключается в том, что вы создаете новое событие щелчка при каждом наведении мыши на документе. Эти события клика имеют разных родителей и выполняются по порядку.

...