jQuery的 - 负载

Question

更换一个DOM元素我需要更换以下html元素

<input type="submit" id="send_product_enquiry" value="Send Enquiry" class="button"> 

与此

<input type="submit" id="send_product_enquiry" onclick="ga('send', 'event', { eventCategory: 'Contact From Enquiry', eventAction: 'Form Entry', eventLabel: 'Contact Form Enquiry'});" value="Send Enquiry" class="button"> 

我一直在尝试使用

jQuery(document).ready(function($) { 
$('#send_product_enquiry').replaceWith('<input type="submit" id="send_product_enquiry" onclick="ga('send', 'event', { eventCategory: 'Contact From Enquiry', eventAction: 'Form Entry', eventLabel: 'Contact Form Enquiry'});" value="Send Enquiry" class="button"> '); 
}); 

但我不断收到以下错误

“失踪）的说法......”

我知道这是一个语法的事情与双或单引号，但我只是不知道什么是正确的。一直在搞乱没有结果。

Answer 1

使用jQuery添加点击处理程序。

$('#send_product_enquiry').on('click', function() { 
    ga('send', 'event', { 
     eventCategory: 'Contact From Enquiry', 
     eventAction: 'Form Entry', 
     eventLabel: 'Contact Form Enquiry' 
    }); 
}); 

Answer 2

你必须逃脱你所有的single quotes。看到正在逃脱所有的单引号“\”

$('#send_product_enquiry').replaceWith('<input type="submit" id="send_product_enquiry" onclick="ga(\'send\', \'event\', { eventCategory: \'Contact From Enquiry\', eventAction: \'Form Entry\', eventLabel: \'Contact Form Enquiry\'});" value="Send Enquiry" class="button"> '); 

为什么你需要ESCAPE：

在解释你的代码，你是混淆了解您的字符串结尾的解释。转义字符串意味着减少歧义。通过前面的斜杠，你宣布它是一个值的一部分。

Answer 3

的问题是，你传递replaceWith字符串结束迟早比你想象的那样：

jQuery(document).ready(function($) { 
$('#send_product_enquiry').replaceWith('<input type="submit" id="send_product_enquiry" onclick="ga('send', 'event', { eventCategory: 'Contact From Enquiry', eventAction: 'Form Entry', eventLabel: 'Contact Form Enquiry'});" value="Send Enquiry" class="button"> '); 
// Here -------------------------------------------------------------------------------------------^ 
}); 

什么像样的程序编辑器应该已经是明显的语法高亮。

要把一个'放入与'引用的字符串中，您需要使用\'。

---

但更好的是，因为你使用jQuery，动态挂钩的处理程序：

jQuery(document).ready(function($) { 
    var btn = $('<input type="submit" id="send_product_enquiry" value="Send Enquiry" class="button">'); 
    $('#send_product_enquiry').replaceWith(btn); 
    btn.on("click", function() { 
    ga('send', 'event', { 
     eventCategory: 'Contact From Enquiry', 
     eventAction: 'Form Entry', 
     eventLabel: 'Contact Form Enquiry' 
    }); 
    }); 
}); 

那是，如果你真的需要更换的元素，而不仅仅是增加一个处理程序它或修改它一点。如果您只需添加处理程序，则：

jQuery(document).ready(function($) { 
    $('#send_product_enquiry').on("click", function() { 
    ga('send', 'event', { 
     eventCategory: 'Contact From Enquiry', 
     eventAction: 'Form Entry', 
     eventLabel: 'Contact Form Enquiry' 
    }); 
    }); 
});