Javascript 触发器Div从链接单击
我有一个网站，左边有一个弹出式联系人表单（contact），上面有这个idJavascript 触发器Div从链接单击,javascript,jquery,Javascript,Jquery,我有一个网站，左边有一个弹出式联系人表单（contact），上面有这个id 页脚中还有一个名为“联系我们”的链接 <a href="#" title="CONTACT US">CONTACT US</a> 我需要这个链接来触发弹出式联系人表单，就像手动单击联系人选项卡一样 这可能吗？我该怎么做 谢谢 JOnathan使用$（“#divId”）。单击（）。这将在具有指定ID的div中触发click事件 下面给出的代码在Chrome和IE8上进行了测试 <htm
<a href="#" title="CONTACT US">CONTACT US</a>
$（“#divId”）。单击（）。这将在具有指定ID的div中触发click事件
下面给出的代码在Chrome和IE8上进行了测试
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#myDiv").click(function() {
alert('Clicked!');
});
$("#myLink").click(function() {
$("#myDiv").click();
});
});
</script>
</head>
<body>
<div id="myDiv">Some Text</div>
<a id="myLink" href="#">Link</a>
</body>
</html>
试验
$（函数（）{
$（“#myDiv”）。单击（函数（）{
警报（'Clicked！'）；
});
$（“#myLink”）。单击（函数（）{
$（“#myDiv”）。单击（）；
});
});
一些文本
试试这个：
$(function(){
$("#contact").click(function () {
$("#contactable").trigger('click');
});
});
<a title="CONTACT US" href="#" id="contact">CONTACT US</a>
$（函数（）{
$（“#联系人”）。单击（功能（）{
$（“#可接触”）.trigger（'click'）；
});
});
html:
编辑：
除了页面不在顶部之外，它看起来像是按照您想要的方式工作。如果是这种情况，请检查jQuery的函数。此外，“可接触”div似乎未连接到接触部分，这可能是一个问题。如果这不是你的问题，请编辑问题来描述你当前的问题，因为这似乎是与插件的交互，而不是触发div点击。祝你好运
旧答案（来源已更改，不再适用）：
这种情况下的问题是选择器（#contact-获取id等于“contact”的元素）在以下情况下：
$(function(){
$("#contact").click(function () {
$("#contactable").trigger('click');
});
});
与要将事件添加到的元素不匹配：
<a href="#" title="CONTACT US">CONTACT US</a>
所有建议的解决方案都应该有效。但我认为你需要防止主播的违约行为
在文档部分的标记中添加此代码
$(document).ready(function(){
$("#contact").click(function(event){
event.preventDefault(); //stops the browser from following the link
$("#contactable").click(); //opens contact form
alert("Showing mycontactform"); //remove this when it's working
});
});
您需要将“id”标记添加到您的联系人锚中：
<a href="#" id="contact" title="Contact Us">CONTACT US</a>
您还需要确保在文档的部分中包含jQuery
在标记后添加此行：
在这件事上我不得不承认失败。我不相信有基于上述答案的解决方案（尽管我知道它们在测试环境中工作），但它们在我的情况下不起作用
原因是如果您在DIV#contact
没有暴露在源代码中，所以无论我做什么，这些方法都不会起作用。弹出表单的相关javascript在这里，也许这会提供一些线索
/*
* contactable 1.2.1 - jQuery Ajax contact form
*
* Copyright (c) 2009 Philip Beel (http://www.theodin.co.uk/)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
* Revision: $Id: jquery.contactable.js 2010-01-18 $
*
*/
//extend the plugin
(function($){
//define the new for the plugin ans how to call it
$.fn.contactable = function(options) {
//set default options
var defaults = {
name: 'Name',
email: 'Email',
message : 'Message',
subject : 'A contactable message',
label_name: 'Name',
label_email: 'E-Mail',
label_website: 'Website',
label_feedback: 'Your Feedback',
label_send: 'SEND',
recievedMsg : 'Thankyou for your message',
notRecievedMsg : 'Sorry but your message could not be sent, try again later',
disclaimer: 'Please feel free to get in touch, we value your feedback',
hide_email: 'false',
hide_website: 'false',
fileMail: 'mail.php',
hideOnSubmit: true
};
//call in the default otions
var options = $.extend(defaults, options);
//act upon the element that is passed into the design
return this.each(function(options) {
//construct the form
div_form = '<div id="contactable"></div><form id="contactForm" method="" action=""><div id="loading"></div><div id="callback"></div><div class="holder">';
div_form += '<p><label for="name">'+defaults.label_name+' <span class="red"> * </span></label><br /><input id="name_mc" class="contact" name="name" /></p>';
if(defaults.hide_email == 'false'){
div_form += '<p><label for="email">'+defaults.label_email+' <span class="red"> * </span></label><br /><input id="email_mc" class="contact" name="email" /></p>';
}
if(defaults.hide_website == 'false'){
div_form += '<p><label for="email">'+defaults.label_website+' <span class="red"> * </span></label><br /><input id="website_mc" class="contact" name="url" /></p>';
}
div_form += '<p><label for="comment">'+defaults.label_feedback+' <span class="red"> * </span></label><br /><textarea id="comment_mc" name="comment" class="comment" rows="4" cols="30" ></textarea></p>';
div_form += '<p><input class="submit" type="submit" value="'+defaults.label_send+'"/></p>';
div_form += '<p class="disclaimer">'+defaults.disclaimer+'</p></div></form>';
$(this).html(div_form);
//show / hide function
$('div#contactable').toggle(function() {
$('#overlay').css({display: 'block'});
$(this).animate({"marginLeft": "-=5px"}, "fast");
$('#contactForm').animate({"marginLeft": "-=0px"}, "fast");
$(this).animate({"marginLeft": "+=387px"}, "slow");
$('#contactForm').animate({"marginLeft": "+=390px"}, "slow");
},
function() {
$('#contactForm').animate({"marginLeft": "-=390px"}, "slow");
$(this).animate({"marginLeft": "-=387px"}, "slow").animate({"marginLeft": "+=5px"}, "fast");
$('#overlay').css({display: 'none'});
});
//validate the form
$("#contactForm").validate({
//set the rules for the fild names
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url: {
required: true,
url: true
},
comment: {
required: true
}
},
//set messages to appear inline
messages: {
name: "",
email: "",
url: "",
comment: ""
},
submitHandler: function() {
$('.holder').hide();
$('#loading').show();
name_val = $('#contactForm #name_mc').val();
if(defaults.hide_email == 'false') email_val = $('#contactForm #email_mc').val();
else email_val = 'nothing';
if(defaults.hide_website == 'false') website_val = $('#contactForm #website_mc').val();
else website_val = 'nothing';
comment_val = $('#contactForm #comment_mc').val();
$.post(defaults.fileMail,{subject:defaults.subject, name: name_val, email: email_val, website: website_val, comment:comment_val},
function(data){
$('#loading').css({display:'none'});
if( data == 'success') {
$('#callback').show().append(defaults.recievedMsg);
if(defaults.hideOnSubmit == true) {
//hide the tab after successful submition if requested
$('#contactForm').animate({dummy:1}, 2000).animate({"marginLeft": "-=450px"}, "slow");
$('div#contactable').animate({dummy:1}, 2000).animate({"marginLeft": "-=447px"}, "slow").animate({"marginLeft": "+=5px"}, "fast");
$('#overlay').css({display: 'none'});
}
} else {
$('#callback').show().append(defaults.notRecievedMsg);
}
});
}
});
});
};
})(jQuery);
/*
*可联系的1.2.1-jQuery Ajax联系表单
*
*版权所有（c）2009 Philip Beel(http://www.theodin.co.uk/)
*麻省理工学院双重授权(http://www.opensource.org/licenses/mit-license.php)
*和GPL(http://www.opensource.org/licenses/gpl-license.php)执照。
*
*修订版：$Id:jquery.contactable.js 2010-01-18$
*
*/
//扩展插件
（函数（$）{
//定义插件的新名称以及如何调用它
$.fn.contactable=功能（选项）{
//设置默认选项
var默认值={
姓名：'姓名'，
电子邮件：“电子邮件”，
消息：“消息”，
主题：“可联系的消息”，
标签名称：“名称”，
给电子邮件贴上标签：“电子邮件”，
标签_网站：“网站”，
给反馈贴上标签：“你的反馈”，
标签_send:“send”，
ReceiveDMSG:'谢谢你的留言'，
NotReceiveDMSG:'抱歉，您的邮件无法发送，请稍后再试'，
免责声明：“请随时联系，我们重视您的反馈”，
隐藏电子邮件：“false”，
隐藏_网站：“假”，
fileMail:'mail.php'，
希顿：对
};
//调用默认的otions
var options=$.extend（默认值，选项）；
//作用于传递到设计中的元素
返回此。每个函数（选项）{
//构建表单
div_form=''；
div_form+=''+默认值。label_name+'*
'；
if（defaults.hide_email=='false'）{
div_form+=''+默认值。label_email+'*
'；
}
if（defaults.hide_网站=='false'）{
div_form+=''+默认值。label_website+'*
'；
}
div_form+=''+默认值。label_feedback+'*
'；
div_form+=''；
div_form+=''+默认值。免责声明+'
'；
$（this.html（div_格式）；
//显示/隐藏功能
$（'div#contactable'）。切换（函数（）{
$（'#overlay'）.css（{display:'block'}）；
$（this.animate（{“marginLeft”：“-=5px”}，“fast”）；
$（'#contactForm'）。动画（{“marginLeft”：“-=0px”}，“fast”）；
$（this.animate（{“marginLeft”：“+=387px”}，“slow”）；
$（'#contactForm'）。动画（{“marginLeft”：“+=390px”}，“slow”）；
},
函数（）{
$（'#contactForm'）。动画（{“marginLeft”：“-=390px”}，“slow”）；
$（这个）.animate（{“marginLeft”：“-=387px”}，“慢”）.animate（{“marginLeft”：“+=5px”}，“快”）；
$（'#overlay'）.css（{display:'none'}）；
});
//验证表单
$（“#联系人表单”）。验证({
//设置fild名称的规则
规则：{
姓名：{
要求：正确，
最小长度：2
},
电邮：{
要求：正确，
电子邮件：真的
},
网址：{
要求：正确，
网址：true
},
评论：{
<a title="CONTACT US" href="#" id="contact" class="contactable">CONTACT US</a>
$(function(){
$(".contactable").click(function () {
$("#contactable").trigger('click');
});
});
$(document).ready(function(){
$("#contact").click(function(event){
event.preventDefault(); //stops the browser from following the link
$("#contactable").click(); //opens contact form
alert("Showing mycontactform"); //remove this when it's working
});
});
<a href="#" id="contact" title="Contact Us">CONTACT US</a>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
/*
* contactable 1.2.1 - jQuery Ajax contact form
*
* Copyright (c) 2009 Philip Beel (http://www.theodin.co.uk/)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
* Revision: $Id: jquery.contactable.js 2010-01-18 $
*
*/
//extend the plugin
(function($){
//define the new for the plugin ans how to call it
$.fn.contactable = function(options) {
//set default options
var defaults = {
name: 'Name',
email: 'Email',
message : 'Message',
subject : 'A contactable message',
label_name: 'Name',
label_email: 'E-Mail',
label_website: 'Website',
label_feedback: 'Your Feedback',
label_send: 'SEND',
recievedMsg : 'Thankyou for your message',
notRecievedMsg : 'Sorry but your message could not be sent, try again later',
disclaimer: 'Please feel free to get in touch, we value your feedback',
hide_email: 'false',
hide_website: 'false',
fileMail: 'mail.php',
hideOnSubmit: true
};
//call in the default otions
var options = $.extend(defaults, options);
//act upon the element that is passed into the design
return this.each(function(options) {
//construct the form
div_form = '<div id="contactable"></div><form id="contactForm" method="" action=""><div id="loading"></div><div id="callback"></div><div class="holder">';
div_form += '<p><label for="name">'+defaults.label_name+' <span class="red"> * </span></label><br /><input id="name_mc" class="contact" name="name" /></p>';
if(defaults.hide_email == 'false'){
div_form += '<p><label for="email">'+defaults.label_email+' <span class="red"> * </span></label><br /><input id="email_mc" class="contact" name="email" /></p>';
}
if(defaults.hide_website == 'false'){
div_form += '<p><label for="email">'+defaults.label_website+' <span class="red"> * </span></label><br /><input id="website_mc" class="contact" name="url" /></p>';
}
div_form += '<p><label for="comment">'+defaults.label_feedback+' <span class="red"> * </span></label><br /><textarea id="comment_mc" name="comment" class="comment" rows="4" cols="30" ></textarea></p>';
div_form += '<p><input class="submit" type="submit" value="'+defaults.label_send+'"/></p>';
div_form += '<p class="disclaimer">'+defaults.disclaimer+'</p></div></form>';
$(this).html(div_form);
//show / hide function
$('div#contactable').toggle(function() {
$('#overlay').css({display: 'block'});
$(this).animate({"marginLeft": "-=5px"}, "fast");
$('#contactForm').animate({"marginLeft": "-=0px"}, "fast");
$(this).animate({"marginLeft": "+=387px"}, "slow");
$('#contactForm').animate({"marginLeft": "+=390px"}, "slow");
},
function() {
$('#contactForm').animate({"marginLeft": "-=390px"}, "slow");
$(this).animate({"marginLeft": "-=387px"}, "slow").animate({"marginLeft": "+=5px"}, "fast");
$('#overlay').css({display: 'none'});
});
//validate the form
$("#contactForm").validate({
//set the rules for the fild names
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url: {
required: true,
url: true
},
comment: {
required: true
}
},
//set messages to appear inline
messages: {
name: "",
email: "",
url: "",
comment: ""
},
submitHandler: function() {
$('.holder').hide();
$('#loading').show();
name_val = $('#contactForm #name_mc').val();
if(defaults.hide_email == 'false') email_val = $('#contactForm #email_mc').val();
else email_val = 'nothing';
if(defaults.hide_website == 'false') website_val = $('#contactForm #website_mc').val();
else website_val = 'nothing';
comment_val = $('#contactForm #comment_mc').val();
$.post(defaults.fileMail,{subject:defaults.subject, name: name_val, email: email_val, website: website_val, comment:comment_val},
function(data){
$('#loading').css({display:'none'});
if( data == 'success') {
$('#callback').show().append(defaults.recievedMsg);
if(defaults.hideOnSubmit == true) {
//hide the tab after successful submition if requested
$('#contactForm').animate({dummy:1}, 2000).animate({"marginLeft": "-=450px"}, "slow");
$('div#contactable').animate({dummy:1}, 2000).animate({"marginLeft": "-=447px"}, "slow").animate({"marginLeft": "+=5px"}, "fast");
$('#overlay').css({display: 'none'});
}
} else {
$('#callback').show().append(defaults.notRecievedMsg);
}
});
}
});
});
};
})(jQuery);
<?php
/*
Plugin Name: Magic Contact
Plugin URI: http://blog.hunk.com.mx/magic-contact/
Description: is a simple and Elegant contact form for Wordpress, taking as it bases to <a href="http://theodin.co.uk/blog/ajax/contactable-jquery-plugin.html">Contactable</a> (jQuery Plugin) By <a href="http://theodin.co.uk/">Philip Beel</a>, After enabling this plugin visit <a href="options-general.php?page=magic-contact.php">the options page</a> to configure settings of sending mail.
Version: 0.1
Author: Hunk
Author URI: http://hunk.com.mx
Copyright 2010 Edgar G (email : ing.edgar@gmail.com)
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/
register_activation_hook( dirname(__FILE__) . '/main.php', 'magic_contact_activate' );
function magic_contact_activate(){
if(!get_option('init_contact')){
update_option( 'recipient_contact', get_bloginfo('admin_email') );
update_option( 'subject_contact', 'A contactable message' );
update_option( 'label_name_contact', 'Name' );
update_option( 'label_email_contact', 'E-Mail' );
update_option( 'label_website_contact', 'Website' );
update_option( 'label_feedback_contact', 'Your Message' );
update_option( 'label_send_contact', 'SEND' );
update_option( 'recievedMsg_contact', 'Thank you for your message' );
update_option( 'notRecievedMsg_contact', 'Sorry, your message could not be sent, try again later' );
update_option( 'disclaimer_contact', 'Please feel free to get in touch, we value your feedback' );
update_option( 'hide_email_contact', 'false' );
update_option( 'hide_website_contact', 'false' );
update_option( 'init_contact', 1 );
}
}
// Add action links
add_action('plugin_action_links_' . plugin_basename(__FILE__), 'AddPluginActions');
function AddPluginActions($links) {
$new_links = array();
$new_links[] = '<a href="options-general.php?page=magic-contact.php">' . __('Settings') . '</a>';
return array_merge($new_links, $links);
}
add_action('admin_menu', 'mc_admin_actions');
function mc_admin_actions(){
add_options_page("Magic Contact", "Magic Contact", 'manage_options',"magic-contact.php", "magic_contact_menu");
}
function magic_contact_menu(){
if ( isset($_POST['submit']) ) {
if ( function_exists('current_user_can') && !current_user_can('manage_options') )
die(__('Cheatin’ uh?'));
update_option( 'recipient_contact', $_POST['recipient_contact'] );
update_option( 'subject_contact', $_POST['subject_contact'] );
update_option( 'label_name_contact', $_POST['label_name_contact'] );
update_option( 'label_email_contact', $_POST['label_email_contact'] );
update_option( 'label_website_contact', $_POST['label_website_contact'] );
update_option( 'label_feedback_contact', $_POST['label_feedback_contact'] );
update_option( 'label_send_contact', $_POST['label_send_contact'] );
update_option( 'recievedMsg_contact', $_POST['recievedMsg_contact'] );
update_option( 'notRecievedMsg_contact', $_POST['notRecievedMsg_contact'] );
update_option( 'disclaimer_contact', $_POST['disclaimer_contact'] );
if ( isset( $_POST['hide_email_contact'] ) ) update_option( 'hide_email_contact', 'true' ); else update_option( 'hide_email_contact', 'false' );
if ( isset( $_POST['hide_website_contact'] ) ) update_option( 'hide_website_contact', 'true' ); else update_option( 'hide_website_contact', 'false' );
}
include 'form-admin.php';
}
add_action('template_redirect', 'script_magic_contact');
function script_magic_contact(){
$base = WP_PLUGIN_URL.'/'.str_replace(basename( __FILE__),"",plugin_basename(__FILE__));
wp_enqueue_script( 'jquery.contactable', $base . 'contactable/jquery.contactable.js', array('jquery') , 3.1);
wp_enqueue_script( 'jquery.validate', $base . 'contactable/jquery.validate.pack.js', array('jquery') , 3.1);
wp_enqueue_script( 'my_contactable', $base . 'my.contactable.php', array('jquery') , 3.1);
wp_enqueue_style( 'contactable', $base . 'contactable/contactable.css' );
}
add_action('wp_footer','div_magic_contact');
function div_magic_contact(){
echo '<div id="mycontactform"> </div>';
}
?>