Этот код, похоже, не запускает эту кнопку. Что пошло не так?

Я работаю над чем-то для клиента, и агентство построило небольшой бит jQuery, чтобы запустить ярлык Floodlight DoubleClick, но по какой-то причине тег не работает:

<script type="text/javascript">
$(function () {

    //var origOnClick = $('#trackingButton').attr("onclick");
    $('#trackingButton').click(fireFloodlight);
    function fireFloodlight() {
        if (Page_IsValid) {
            var axel = Math.random() + "";
            var a = axel * 10000000000000;
            $("body").append('<img src="https://ad.doubleclick.net/activity;src=2499215;type=axa_l124;cat=lpg_g263;ord=' + a + '?" width="1" height="1" alt=""/>');
            //eval(origOnClick);
        }
    }

});
</script>

Мне этот script выглядит отлично, но в живой среде вызов "ad.doubleclick.net" никогда не производится? Любая помощь приветствуется. Странно, что тег работал до этого уик-энда, но теперь он не записывает никаких действий?

EDIT: я сделал console.log(Page_IsValid), который возвратил True.

EDIT: Вот HTML для данной кнопки:

<input type="submit" name="ctl00$ctl00$ctl00$BodyPlaceHolder$BodyPlaceHolder$WizardContentPlaceHolder$WizardCollectBasicSMEInfo$trackingButton" value="Get your quick quote" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl00$ctl00$BodyPlaceHolder$BodyPlaceHolder$WizardContentPlaceHolder$WizardCollectBasicSMEInfo$trackingButton&quot;, &quot;&quot;, true, &quot;Form&quot;, &quot;&quot;, false, false))" id="trackingButton" class="button" />

ОТВЕТЫ

Ответ 1

У вас уже есть функция с готовым документом, ваша проблема в том, что вы вызываете функцию неправильно, если вы хотите вызвать такую ​​функцию, которую вы должны объявить как выражение функции (см. раздел "Выражения функций" в этой ссылке для получения дополнительной информации):

$(function () {

var fireFloodlight = function()  {
    if (true) {
        var axel = Math.random() + "";
        var a = axel * 10000000000000;
        $("body").append('<img src="http://tejedoresdesuenos.com.mx/wp-content/uploads/2011/06/google.jpg" width="50" height="10" alt=""/>');
        alert('ello');
    }
}

$('#trackingButton').click(fireFloodlight);


});

рабочий пример.

Ответ 2

Если этот код находится в теге head вашего HTML файла, он не будет работать должным образом. JavaScript попытается выполнить до того, как страница будет обработана. Из-за этого, когда код выполняется, тег input еще не будет существовать в соответствии с парсером. Вы можете поместить его в функцию готовности документа или просто поместите свой тег script в конец документа HTML (до конца body).

<script type="text/javascript">
    $(document).ready(function () {
        $('#trackingButton').click(fireFloodlight);
        function fireFloodlight() {
            if (Page_IsValid) {
                var axel = Math.random() + "";
                var a = axel * 10000000000000;
                $("body").append('<img src="https://ad.doubleclick.net/activity;src=2499215;type=axa_l124;cat=lpg_g263;ord=' + a + '?" width="1" height="1" alt=""/>');
            }
        }
    });
</script>

Кроме того, если вы не используете функцию fireFloodlight в других функциях onclick, вы можете просто передать ее как анонимную функцию.

<script type="text/javascript">
    $(document).ready(function () {
        $('#trackingButton').click(function() {
            if (Page_IsValid) {
                var axel = Math.random() + "";
                var a = axel * 10000000000000;
                $("body").append('<img src="https://ad.doubleclick.net/activity;src=2499215;type=axa_l124;cat=lpg_g263;ord=' + a + '?" width="1" height="1" alt=""/>');
            }
        });
    });
</script>

Кроме того, если вы используете последнюю версию jQuery, вам нужно использовать .on() вместо .live(), .delegate() или .click(). Первые два теперь технически устарели в последней версии jQuery (хотя я очень сомневаюсь, что они будут удалены в течение некоторого времени), и, если я правильно помню, .click() является просто оберткой для .on(), поэтому она технически быстрее использовать .on().

Я приведу вам два примера использования .on().

Первый пример - просто добавить событие в элемент #trackingButton после первоначальной загрузки страницы.

<script type="text/javascript">
    $(document).ready(function () {
        $('#trackingButton').on('click',function() {
            if (Page_IsValid) {
                var axel = Math.random() + "";
                var a = axel * 10000000000000;
                $("body").append('<img src="https://ad.doubleclick.net/activity;src=2499215;type=axa_l124;cat=lpg_g263;ord=' + a + '?" width="1" height="1" alt=""/>');
            }
        });
    });
</script>

Второй пример работает, присоединяя событие к родительскому элементу и выполняя функцию после него bubbles до DOM к родительскому элементу, а целевой элемент соответствует селектору, указанному во втором параметре. Он обычно используется при присоединении событий к элементам, которые могут быть добавлены/удалены/повторно добавлены на страницу динамически после начальной загрузки.

<script type="text/javascript">
    $(document).ready(function () {
        $(document).on('click','#trackingButton',function() {
            if (Page_IsValid) {
                var axel = Math.random() + "";
                var a = axel * 10000000000000;
                $("body").append('<img src="https://ad.doubleclick.net/activity;src=2499215;type=axa_l124;cat=lpg_g263;ord=' + a + '?" width="1" height="1" alt=""/>');
            }
        });
    });
</script>

Я надеюсь, что эти примеры помогут!

Ответ 3

Попробуйте следующее:

        //var origOnClick = $('#trackingButton').attr("onclick");
        $('#trackingButton').live("click", function(){

            if (Page_IsValid) {
                var axel = Math.random() + "";
                var a = axel * 10000000000000;
                $("body").append('<img src="https://ad.doubleclick.net/activity;src=2499215;type=axa_l124;cat=lpg_g263;ord=' + a + '?" width="1" height="1" alt=""/>');
                //eval(origOnClick);
            }
         });

Ответ 4

Фактически вы назначили два обработчика событий для одного и того же события одному элементу. Насколько я знаю, это не должно быть возможным.

Кроме того, вы должны обернуть свой вызов функции внутри анонимной функции, например:

$('#trackingButton').click( function() {

    fireFloodlight();

});

Возможно, вам захочется избежать назначения обработчиков событий непосредственно в разметке HTML, обычно это считается плохой практикой.

Убедитесь, что ваш #trackingButton уже присутствует в DOM, когда вы вызываете try, чтобы назначить ему обработчик события клика.

Также убедитесь, что в журнале консоли отсутствуют ошибки, и никакие другие плагины или скрипты не изменяют DOM при попытке назначить обработчик событий.

Ответ 5

Ваш html node имеет явный атрибут onclick, который, в соответствии с вашим кодом, не деактивируется.

Что делает WebForm_DoPostBackWithOptions? Если в некоторой конфигурации эта функция возвращает false, это предотвратит вызов других обработчиков.

Если вы можете действовать на код, который создает html, я бы посоветовал удалить этот атрибут onclick из node и объявить его обработчиком jQuery.

Ответ 6

Этот код запускает как событие onclick, так и событие click, связанное с селектором #trackingButton:

Вы можете переместить событие onclick, чтобы запустить функцию, а не встроить ее:

<input type="submit" onclick="myPostBack()" name="ctl00$ctl00$ctl00$BodyPlaceHolder$BodyPlaceHolder$WizardContentPlaceHolder$WizardCollectBasicSMEInfo$trackingButton" value="Get your quick quote" id="trackingButton" class="button" />

.... тогда js:

function myPostBack() {
/*
    WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$ctl00$BodyPlaceHolder$BodyPlaceHolder$WizardContentPlaceHolder$WizardCollectBasicSMEInfo$trackingButton", "", true, "Form", "", false, false))
*/
    alert("postback executed")
}

Примечание. Я установил предупреждение в качестве примера, чтобы убедиться, что функция myPostBack выполнена.

Если WebForm_DoPostBackWithOptions не используется, убедитесь, что у вас нет синтаксических ошибок (используя &quot; триггеры js-ошибок), и вы передаете правильные параметры... проверьте это для более подробной информации.

... js (continue)

function fireFloodlight() {
    if (Page_IsValid) {
        var axel = Math.random() + "";
        var a = axel * 10000000000000;
        $("body").append('<img src="https://ad.doubleclick.net/activity;src=2499215;type=axa_l124;cat=lpg_g263;ord=' + a + '?" width="1" height="1" alt=""/>');
        //eval(origOnClick);

        // append another image for verification purposes
        $("body").append('<img src="http://www.devaldi.com/wp-content/uploads/2009/10/jquery-logo.gif" alt="jquery" />')
    }
}

$(function() {
  // using .on() requires jQuery 1.7+
    $('#trackingButton').on("click", function() {
        fireFloodlight();
    });
});

Предполагая, что Page_IsValid true, это должно работать... СМОТРИТЕ JSFIDDLE пример... если все пойдет правильно, вы должны см. оповещение после отправки, а также изображение jQuery;)

Ответ 7

Как вы добавляете свой #trackingButton? Если вы делаете это с помощью jQuery, используйте на вместо нажмите

 $('body').on('click','#trackingButton',function(){
      console.log("Page_IsValid: "+Page_IsValid);
      if (Page_IsValid) {
        var axel = Math.random() + "";
        var a = axel * 10000000000000;
        $("body").append('<img src="https://ad.doubleclick.net/activity;src=2499215;type=axa_l124;cat=lpg_g263;ord=' + a + '?" width="1" height="1" alt=""/>');
      }
    });

Page_IsValid должен быть правдой, а ваш img должен быть добавлен в DOM.

Это сработало?

Ответ 8

Возможно, кнопка отправки запускает запрос, поэтому вы никогда не увидите, как изображение добавляется в тело. event.preventDefault() может это исправить.

$('#trackingButton').click(function(event) {
    event.preventDefault();
    if (Page_IsValid) {
        var axel = Math.random() + "";
        var a = axel * 10000000000000;
        $("body").append('<img src="https://ad.doubleclick.net/activity;src=2499215;type=axa_l124;cat=lpg_g263;ord=' + a + '?" width="1" height="1" alt=""/>');
        //eval(origOnClick);
    }
}