由于某种原因,Jquery链接选择器无法正常工作

时间:2013-07-19 22:10:59

标签: javascript jquery

Jquery没有选择a标签,虽然我在Jquery代码中选择了它,但是没有阻止标签默认动作。我只复制了代码的相关部分,所以人们可以告诉我出了什么问题。

我选择其他链接的Jquery代码的其他部分工作...并且阻止了默认操作..下面是问题部分。

<?php
        header ("Cache-Control: no-cache, must-revalidate");    // HTTP/1.1
        header ("Expires: Sat 26 Jul 1997 05:00:00 GMT");       // Date in the past
        require_once ("../_includes/functions.php");
        ?>
        <link rel="stylesheet" title="Style CSS" href="../_reports/report_assets/cwcalendar.css" type="text/css" media="all" />
        <script src="../_js/jquery-1.6.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../_js/timer.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" src="../_reports/report_assets/calendar.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $('#select').click(function(event){ 
                $(':checkbox').prop("checked", true);
                event.preventDefault();
            });
            $('#deselect').click(function(event){ 
                $(':checkbox').prop("checked", false);
                event.preventDefault();
            });

            $('#add').click(function() {
                var field = '<input class="project_fields" type="text" size ="30" name = field_settings[] /> &nbsp;&nbsp;&nbsp;&nbsp;';
                var checkbox = '<input class ="checkbox" type ="checkbox" name ="check_field[]" />&nbsp;&nbsp;&nbsp;';
                var delete_link = '<a class ="delete_link" style="text-decoration:none;" href="#"> Delete field </a> &nbsp;&nbsp;&nbsp;<br /><br />';
                var input = field + checkbox + delete_link;
                $('#input_fields').append(input);
            });

            $('div#input_fields a.delete_link').click(function(event) {
                event.preventDefault();
                alert('clicked !!!!');


            });

            $('#project_fields_submit').click(function() {
                var array_fields = new Array();
                $('.checkbox').each(function() {
                    if($(this) .is(':checked')) {
                        array_fields.push('1');
                    }
                    else {

                        array_fields.push('0');
                    }

                });
                $('#checkboxes').val(array_fields);
            });

            $('#edit_fields_submit').click(function() {
                var edit_fields = new Array();
                $('.edit_check').each(function() {
                    if($(this) .is(':checked')) {
                        edit_fields.push('1');
                    }
                    else {

                        edit_fields.push('0');
                    }

                });
                $('#edit_checkboxes').val(edit_fields);

            });

            $('#add_edit').click(function() {
                var new_field = '<input class ="edit_data" type="text" size ="40" name = edit_field_value[] value =""> &nbsp;&nbsp;&nbsp;';
                var new_checkbox = '<input class ="edit_check" type ="checkbox" name ="check_field[]" >&nbsp;&nbsp;&nbsp;';
                var delete_edit = '<a id ="new_delete_edit" style="text-decoration:none;" href="#" > Delete field </a><br><br>';
                var new_input = new_field + new_checkbox; 
                $('#new_input_fields').append(new_input);
                $('#new_input_fields').append(delete_edit);
            });


            $('a.delete_edit').click(function(event) {
                event.preventDefault();
                var ID = $(this).attr('id');
                var delete_field_id = 'edit_field'+ID;
                var field_data = $('#'+ delete_field_id).val(); 
                var project_id =  $('#edit_project_id').val();
                var string = {field : field_data, pid : project_id };
                $.ajax({
                    type: "POST",
                    url: "_ajax/delete_field.php",
                    data: string,
                    success: function(data){
                        $('#'+ID).remove();
                        $('#'+delete_field_id).remove();
                        $('#new_check'+ID).remove();
                    }
                });


            });


            $('#new_delete_edit').click(function(event) {
                alert("clicked !!!");
                event.preventDefault();
                 alert("Was preventDefault() called: " + event.isDefaultPrevented());
                $(this).hide();

            });


        });
</script>
<?php

function GetClientDropdown($pid){
    $data = "";
    $query = "SELECT cms_users.username, managers.user_id, managers.project_id, cms_users.status
    FROM cms_users
    INNER JOIN managers
    ON cms_users.user_id=managers.user_id AND managers.project_id='$pid' AND status!=1
    ORDER BY managers.user_id ASC";
    $result = mysql_query($query);

    $data .= '<form action="" method="POST" accept-charset="utf-8" onsubmit="SubmitClientSettings(event);">
    <select id="client_managers" onChange="GetClientInfo(this);">
    <option value="0">Select User';
    while ($row = mysql_fetch_assoc($result)){
        $data .= '<option value="' . $row['user_id'] . '">' . $row['username'];
    }
    $data .= '</select>';

    $data .= '<div id="manager_info"></div>';

    $data .= '</form>';

    return $data;
}

function GetStartDate($sid){
    $query = "SELECT start_date FROM shows WHERE show_id='$sid'";
    $result = mysql_fetch_assoc(mysql_query($query));
    return $result['start_date'];
}

function GetEndDate($sid){
    $query = "SELECT end_date FROM shows WHERE show_id='$sid'";
    $result = mysql_fetch_assoc(mysql_query($query));
    return $result['end_date'];
}


if (isset($_GET['pid']) && isset($_GET['user_id'])) {

    $id = $_GET['user_id']; 
    $pid = $_GET['pid']; 
    $show_id = $_GET['show_id']; 
    $query = "SELECT status FROM cms_users WHERE user_id='$id' LIMIT 1";
    $result = mysql_fetch_assoc(mysql_query($query));
    $status = $result['status']; 
    $start = GetStartDate($show_id); 
    $end = GetEndDate($show_id); 
    $pieces = explode ("-", $start);
    $year = $pieces [0];
    $month = $pieces[1];
    $day = $pieces[2];
    $day = $day + 0;
    $start = $year."-".$month."-".$day;

    $pieces = explode ("-", $end);
    $year = $pieces [0];
    $month = $pieces[1];
    $day = $pieces[2];

    $day = $day + 0;
    $end = $year."-".$month."-".$day;


    $query = "SELECT send_method FROM show_settings WHERE show_id='$show_id' LIMIT 1";
    $row = mysql_fetch_assoc(mysql_query($query));

    $auto = $manual = "";
    if ($row['send_method']){
        $auto = "checked";
    }else{
        $manual = "checked";
    }



    ?> 

    <?php echo '<!-- tab 1 --><div id="fragment-6" class="removable">';
    echo '<div id ="project_settings" style="display:none;">';
    echo '<div class="FormArea" style="min-height:600px;">';    

        $query_settings ="SELECT project_settings FROM projects WHERE project_id ='$pid'";
        $result_settings = mysql_query($query_settings);
        $row_settings = mysql_fetch_array($result_settings,MYSQL_ASSOC);
        if($row_settings['project_settings'] == NULL) {
            echo "<h2> Project Settings </h2>";
            echo "<br><br>";
            echo " <b> Add fields </b>";
            echo "&nbsp;&nbsp;";
            echo "<img id ='add' src='_assets/add.png' /><br><br><br>";
            echo '<form action ="" method="post">';
            echo'<input type="hidden" name="pid" value="'.$pid.'">';
            echo "<input id ='checkboxes' type ='hidden' name ='checkboxes' value ='' >";
            echo "<div id='input_fields'> </div>";
            echo '<input id ="project_fields_submit"  type ="submit" name ="project_fields_submit" class="button" value ="Save Settings" /><br><br>';
            echo '</form>';
            echo "<br><br><br><br><p></p>";
        }
        else  {
            echo "<h2> This Project Settings </h2>";
            echo "<br><br><br><br>";
            echo "<b> Add fields</b>&nbsp;&nbsp;<img id ='add_edit' src='_assets/add.png' /><br><br><br>";
            $fields_data = unserialize($row_settings['project_settings']); 
            $i = 0;
            echo '<form action ="" method="post">';
            echo'<input id ="edit_project_id" type="hidden" name="edit_project_id" value="'.$pid.'">';
            echo "<div id='new_input_fields'> </div>";
            echo "<input id ='edit_checkboxes' type ='hidden' name ='edit_checkbox' value ='' >";
            foreach ($fields_data as $key => $value) {
                if($value =="1") {
                    echo "<input id ='edit_field".$i."' class ='edit_data' type ='text' size ='40' name = edit_field_value[] value ='".$key."' />&nbsp;&nbsp;&nbsp;";
                    echo "<input id ='new_check".$i."' class ='edit_check' type='checkbox' name ='edit_checkboxes' checked />&nbsp;&nbsp;&nbsp;";
                    echo "<a id ='".$i."' class ='delete_edit' style='text-decoration:none;' href='#'> Delete field </a><br><br>";

                } else {

                    echo "<input id ='edit_field".$i."' class ='edit_data' type ='text' size='40' name = edit_field_value[] value ='".$key."' />&nbsp;&nbsp;&nbsp;";
                    echo "<input id ='new_check".$i."' class ='edit_check' type='checkbox' name ='edit_checkboxes' />&nbsp;&nbsp;&nbsp;";
                    echo "<a id ='".$i."' class ='delete_edit' style='text-decoration:none;' href='#'> Delete field </a><br><br>";
                }
                $i++;
            }
            echo '<input id ="edit_fields_submit"  type ="submit" name ="edit_fields_submit" class="button" value ="Save Settings" /><br><br>';
            echo '</form>'; 
        }
        echo '</div>';
        echo '<div id="project-setting-results"></div><div class="clear"></div>';
        echo '</div><!-- end fragment-6 -->';
    }

    ?>

2 个答案:

答案 0 :(得分:2)

您正在尝试在创建元素之前绑定选择器。您正在寻找的是.live(),它将侦听器附加到父元素,并在触发选择器的对象上查找事件。我看到你使用的是jQuery 1.6.2,所以你也可以看一下delegate。如果您使用委托,您的代码可能如下所示(您将需要切换回类选择器以干净地支持多个元素):

$("#add_edit").delegate("a.new_delete_edit", "click", function(event) {
  alert("clicked !!!");
  event.preventDefault();
  alert("Was preventDefault() called: " + event.isDefaultPrevented());
  $(this).hide();
});

如果这完全有效,那么很难跟上代码的形式,但想法是将监听器附加到"#add_edit"然后添加新的a.new_delete_edit,如果在一个它们会冒泡到这个代码将被触发的侦听器。

答案 1 :(得分:0)

正如我在代码中看到的那样,

动态添加带有a类的

new_delete_edit

您正在使用click(较旧的jQuery版本)而不是on(较新的jQuery版本)。 click不支持动态添加的元素。

您需要jQuery live插件或对on事件使用click更新的jquery,因为它支持动态添加的DOM元素。