javascript - 单击Codeigniter日历中的事件时未获得正确的ID

我正在使用codeigniter日历库。

我正在尝试获取具有事件的表td中的标签的ID

但是由于某种原因，它仍然在没有事件的其他日子运行脚本。


  问题如何确保当我单击表td上的事件时，该事件可以使attr（）的ID正确。


我认为因为Codeigniter日历是由库生成的，所以它对脚本有一定影响

https://www.codeigniter.com/user_guide/libraries/calendar.html

<?php echo $calendar;?>

<script type="text/javascript">
$(document).on('click', '#calendar td' function(e){
    var id = $('#calendar table tr td a').attr('id');

    if (id.length > 0) {
        alert(id);
    }
});
</script>

控制器代码

<?php

class Events extends CI_Controller {

    public function __construct() {
        parent::__construct();
    }

    public function index() {

    }

    public function calendar($year = '', $month = '') {
        $this->load->model('events_model');

        $prefs = array(
            'start_day' => 'monday',
            'month_type' => 'long',
            'day_type' => 'short',
            'show_next_prev' => FALSE,
            'next_prev_url' => base_url('welcome')
        );

        $prefs['template'] = '
        {table_open}<table class="table" border="0" cellpadding="0" cellspacing="0">{/table_open}

        {week_row_start}<tr>{/week_row_start}
        {week_day_cell}<td class="week_day">{week_day}</td>{/week_day_cell}
        {week_row_end}</tr>{/week_row_end}

        {cal_row_start}<tr>{/cal_row_start}
        {cal_cell_start}<td>{/cal_cell_start}
        {cal_cell_start_today}<td>{/cal_cell_start_today}
        {cal_cell_start_other}<td class="other-month">{/cal_cell_start_other}
        {cal_cell_content}{day}<br/>{content}{/cal_cell_content}
        {cal_cell_content_today}<div class="highlight"><a href="{content}">{day}</a></div>{/cal_cell_content_today}

        {cal_cell_no_content}{day}{/cal_cell_no_content}
        {cal_cell_no_content_today}<div class="highlight">{day}</div>{/cal_cell_no_content_today}

        {cal_cell_blank}&nbsp;{/cal_cell_blank}

        {cal_cell_other}{day}{/cal_cel_other}

        {cal_cell_end}</td>{/cal_cell_end}
        {cal_cell_end_today}</td>{/cal_cell_end_today}
        {cal_cell_end_other}</td>{/cal_cell_end_other}
        {cal_row_end}</tr>{/cal_row_end}

        {table_close}</table>{/table_close}
        ';

        $this->load->library('calendar', $prefs);

        if (!$year) {
            $year = date('Y');
        }
        if (!$month) {
            $month = date('m');
        }

        $cdata = $this->events_model->geteventevent($year, $month);

        $data['calendar'] = $this->calendar->generate($year, $month, $cdata);

        return $this->load->view('default/template/events/calendar', $data);
    }
}

最佳答案

您可以使用e.target.id

var id = $('#calendar table tr td a').attr('id');

上面的行将始终为您提供ID a，但e.target会得到准确的结果

$(document).on('click', '#calendar td ', function(e){
	console.log(e.target.id);
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar">
		<table>
			<tr>
				<td><a href="#" id="a">a</a></td>
			</tr>
			<tr>
				<td><a href="#" id="b">b</a></td>
			</tr>
			<tr>
				<td><a href="#" id="c">c</a></td>
			</tr>
			<tr>
				<td><a href="#" id="d">d</a></td>
			</tr>
		</table>
	</div>

关于javascript - 单击Codeigniter日历中的事件时未获得正确的ID，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46440338/