Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > Замена функции в аттрибуте onclick

Автор: Aliance 27.5.2009, 10:04

меня есть несколько картинок, к которым применяется inline назначение события click:

Код


( цикл )
{
    <img id="button-<?php print( $k ); ?>" src="/img/expand.gif" onclick="toggleAJAXTree( <?php print( $k . ', ' . $id ); ?> );" />
}

При чем назначать события можно только через nline обработчики, т.е. заменить это нельзя.
Я хочу по клику на картинке вызвать функцию toggleAJAXTree, которая бы после своей отработки, заменяла inline обработчки на вызвавшей ее картинки на другую функцию. Написал такой код:

Код


function toggleAJAXTree( id, type_id )
{
    // какие-то действия

    alert( $( '#button-' + id ).attr( 'onclick' ) ); // старый onclick
    $( '#button-' + id ).attr( 'onclick', 'toggleTree( ' + id + ' );' );
    alert( $( '#button-' + id ).attr( 'onclick' ) ); // новый, все верно
}

Но при этом код не отрабатывает. Т.е. при повторном клике вызывается старая функция. Протестировано в FF.

У кого-то есть идеи как сделать то, что я хочу.

P.S. unbind не предлагать, т.к. обработчики должны назначаться именно inline

Автор: Soah 28.5.2009, 00:41

Aliance, видимо проблема в отработке метода attr() в FF

Код


<script type="text/javascript">
    function toggleAJAXTree(id) {
        alert(document.getElementById('button-'+id).onclick);
        document.getElementById('button-'+id).setAttribute("onclick", "toggleTree('" +id + "');");
        alert(document.getElementById('button-'+id).onclick);
        alert(document.getElementById('button-'+id).getAttribute('onclick'));

        //alert( $( '#button-' + id ).attr( 'onclick' ) ); // старый onclick
        //$( '#button-' + id ).attr( 'onclick', 'toggleTree( "' + id + '" );' );
        //alert( $( '#button-' + id ).attr( 'onclick' ) ); // новый, все верно
    }
    
    function toggleTree(id) {
        alert(id);
    }
</script>

<img id="button-foo" alt="" src="blackjack.jpg" onclick="toggleAJAXTree('foo')" />
<br />
<input type="button" value="click" onclick="alert(document.getElementById('button-foo').onclick);" />

?

В опере работают оба варианта.

Автор: youri 28.5.2009, 07:02

Цитата(Aliance @ 27.5.2009, 10:04

)

Но при этом код не отрабатывает. Т.е. при повторном клике вызывается старая функция. Протестировано в FF.

потому что jQuery в данном случае использует elem[ name ] = value, а не setAttribute

Автор: ksnk 28.5.2009, 08:16

У вас неправильные пчелы, они дают неправильный мед

Код


<script type="text/javascript">
    function toggleAJAXTree(id) {
        $('#button-'+id)[0].onclick=function(){toggleTree(id)};
    }
    
    function toggleTree(id) {
        alert(id);
    }
</script>
<img id="button-foo" alt="" src="blackjack.jpg" onclick="toggleAJAXTree('foo')" />
<img id="button-bar" alt="" src="blackjack.jpg" onclick="toggleAJAXTree('bar')" />

Автор: Aliance 28.5.2009, 13:58

ksnk, такой вариант работает, но такой пробовал и я. Мне интересно почему jQuery-вский вариант не отрабатывает.

youri, поясни? В другой практически аналогичном случае точно такой же код работает на ура.

Soah, дело в том, что алертится то, что нужно. Но вызывается не то + если посмотреть код выделенного фрагмента, то видно, что ничего не изменено.

Автор: youri 28.5.2009, 14:26

я просто посмотрел, что там происходит в jQuery. Там происходит примерно следующее (наверное, подразумевается, что обработчики должны с помощью других функций назначаться):

Код


document.getElementById('#button-' + id).onclick = 'toggleTree( ' + id + ' );';

у меня это строка 998 (jquery-1.3.2): elem[ name ] = value;
но ведь value в таком случае дожно быть функцией, а не строкой
если же использовать setAttribute, то value должно быть строкой, но тогда в ie не будет работать - http://xpoint.ru/know-how/JavaScript/Atributyi?8

Автор: Soah 28.5.2009, 14:48

Цитата(Aliance @ 28.5.2009, 13:58

)

Но вызывается не то

Aliance, а что у тебя алертится?

первый клик

Цитата

// alert(document.getElementById('button-'+id).onclick)
function onclick(event) {
toggleAJAXTree("foo");
}

// alert(document.getElementById('button-'+id).onclick)
function onclick(event) {
toggleAJAXTree("foo");
}

// alert(document.getElementById('button-'+id).getAttribute('onclick'))
toggleAJAXTree('foo')

второй клик

Цитата

// alert(id)
foo

FF 2

Автор: Aliance 30.5.2009, 00:02

Думаю воспользоваться этим, из статьи:

Код


document.body.setAttribute("class", "attribute-test");
if (document.body.className == "attribute-test")
{
  // Атрибуты работают корректно (не Internet Explorer или будущая исправленная версия)

  // Работаем с атрибутами
}
else
{
  // Использовать атрибуты нельзя (Internet Explorer)

  // Альтернативный код только для Internet Explorer
}