Этот код, похоже, не запускает эту кнопку. Что пошло не так?
Я работаю над чем-то для клиента, и агентство построило небольшой бит 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("ctl00$ctl00$ctl00$BodyPlaceHolder$BodyPlaceHolder$WizardContentPlaceHolder$WizardCollectBasicSMEInfo$trackingButton", "", true, "Form", "", 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
не используется, убедитесь, что у вас нет синтаксических ошибок (используя "
триггеры 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);
}
}